Canvas学习笔记之画矩形
步骤
1.使用getElementById()获取canvas元素。
2.获取canvas的绘制环境getContext()。
3.进行绘制画笔的粗细和颜色定义，分别是lineWidth和strokeStyle。
4.告诉系统开始绘制beginPath()，进行绘制坐标重置。
5.使用strokeRect()进行举行路径绘制(并不会填充内部)，或者使用rect()和stroke()先进行路径绘制，然后再使用fillStyle和fille()进行内部填充。
注意事项
1.beginPath()不需要重复调用，如果需要重置绘制路径的坐标的时候可以调用一下。
2.fillStyle()和fill()函数应该跟在绘制的图形后面，不应该放在最后一次性填充，这会导致绘制结果不可控。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>画矩形</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="500">您的浏览器不支持canvas</canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
//定义画笔
ctx.lineWidth = 5;
ctx.strokeStyle = '#f00';
//绘制
ctx.beginPath(); //beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
//直接绘制矩形路径并且带有颜色，不会填充内部。参数分别为起点坐标x和y，矩形长宽，下面的rect函数参数内容也一样。
ctx.strokeRect(10, 10, 70, 40);
//也可以使用下面先画图再上色
ctx.rect(10, 80, 70, 40);
ctx.fillStyle = '#00f'; //填充内部
ctx.fill();
ctx.stroke();
//绘制实心矩形，不会有外层路径
ctx.rect(10, 150, 70, 40);
ctx.rect(10, 220, 70, 40);
//可以看出fill函数会给所有不是stroke的图形填满内部的颜色，所以千万不要在最后才给fill填充内部颜色。正确的使用方法应该是在绘制图形立即跟上绘制的fill函数。
ctx.fillStyle = '#00f';
ctx.fill();
</script>
</body>
</html>
3058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
