cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
</body>
</html>
运行结果：
使用rect()方法绘制矩形
犹豫绘制矩形是常用的方法，所以在Canvas API中已经帮我们封装好了一个绘制矩形的方法——rect()。这个方法接收4个参数x, y, width, height，实际调用时也就是
JavaScript Code复制内容到剪贴板
context.rect(x,y,width,height);
基于此，我们帮刚才封装的方法优化一下。
JavaScript Code复制内容到剪贴板
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();
}
调用封装方法，绘制魔性图像
来个有魔性的图像~
好，我们就拿它开刀，练练手，给咱刚封装好的方法活动活动筋骨。
JavaScript Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绘制魔性图形</title>
</head>
<body>
<div id="canvas-warp">
