- function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
cxt.beginPath();
- cxt.rect(x, y, width, height);
//cxt.closePath(); 可以不用closePath()
-
cxt.lineWidth = borderWidth;
- cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
-
cxt.fill();
- cxt.stroke();
}
调用封装方法,绘制魔性图像
来个有魔性的图像~

好,我们就拿它开刀,练练手,给咱刚封装好的方法活动活动筋骨。
- <!DOCTYPE html>
<html lang="zh">
- <head>
<meta charset="UTF-8">
- <title>绘制魔性图形</title>
</head>
- <body>
<div id="canvas-warp">
- <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的浏览器居然不支持Canvas?!赶快换一个吧!!
- </canvas>
</div>
-
<script>
- window.onload = function(){
var canvas = document.getElementById("canvas");
- canvas.width = 800;
canvas.height = 600;
- var context = canvas.getContext("2d");