微信图片_20200605134409.jpg
在Web页面使用canvas元素很简单，只需要使用canvas标签即可。因为canvas本身不提供绘制能力，这部分工作委托给了JavaScript，所以需要给元素一个id方便后续获取对象。width和height属性告诉浏览器可绘制图形区域的大小（范围）。
<canvas id="myCanvas" width="300" height="300"></canvas>
通过getElementById函数找到canvas元素，然后初始化上下文，之后可以使用上下文API绘制各种图形。下面的脚本可以在Canvas中绘制一个矩形：
var elem = document.getElementByIdx_x('myCanvas');
if (elem && elem.getContext) {
var context = elem.getContext('2d');
if (context) {
context.fillRect(0, 0, 150, 100);
}
}
在上面的例子中，我们展示了绘制矩形是多么简单，而通过fillStyle和strokeStyle属性可以更轻松的设置矩形的填充和线条。
通过fillRect可以绘制带填充的矩形（方法执行完成后。立即对当前矩形进行fill填充。）；使用strokeRect可以绘制只有边框没有填充的矩形（此方法绘制完路径后立即进行stroke绘制）。如果想清除部分Canvas可以使用clearRect。上述三个方法的参数相同：x, y, width, height。x, y是矩形左上角坐标， width和height都是以像素计。
下面将是一个综合实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>填充矩形</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
</div>
<script>
(function(){
var canvas = document.getElementById('cavsElem');
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
canvas.style.border = '1px solid red';
ctx.lineWidth = 12;
//绘制矩形ctx.rect(x,y,w,h);
//前两个参数表示矩形左上角的点的x,y坐标，w,h表示矩形的宽高。
ctx.rect(100,50,100,100);
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.fillStyle = 'yellow';
ctx.fill();
//描边矩形,是一个空心矩形，不会被填充
ctx.strokeStyle = 'green';
ctx.strokeRect(100,200,200,100);
//ctx.fill();不起作用
//填充矩形,默认填充黑色
ctx.beginPath();
ctx.fillStyle = 'pink';
ctx.fillRect(100,350,300,200);
})();
</script>
</body>
</html>
效果图：
38874ddd9dcc01fb3472e30a599a8fa.png
喜欢可关注公众号“十斤代码”
公众号.jpg
回复“领取前端电子书”可免费领取知识哦~~
