canvas是基于状态进行绘制的。在真正绘制（比如调用fill, stroke）之前，对画布的设置都是对画布状态的设置
// 获取页面中的canvas元素
var canvas = document.getElementById('#myCanvas');
// 设置画布大小
canvas.width = 800;
canvas.height = 800;
// 创建一个2d的context
var ctx = canvas.getContext('2d');
// 设置线的宽度
ctx.lineWidth = 10;
方法
beginPath()
开始一段全新的路径，如果没有beginPath()则相当于连续的状态.比如想要给2条折线添加不同的颜色
不使用beginPath的情况：（失败， 最终结果均为blue）
// 第一段折线
ctx.moveTo(100, 200)
ctx.lineTo(300, 400)
ctx.lineTo(100, 600)
ctx.strokeStyle = 'black'
ctx.stroke()
// 第二段折线
ctx.moveTo(300, 200)
ctx.lineTo(500, 400)
ctx.lineTo(300, 600)
ctx.strokeStyle = "blue"
ctx.stroke()
使用beginPath,相当于每次都重新开始一段路劲：（成功）
// 第一段折线
ctx.beginPath() // 开始这个可以省略
ctx.moveTo(100, 200) // 可以替换成ctx.lineTo(100， 200)， 结果一致
ctx.lineTo(300, 400)
ctx.lineTo(100, 600)
ctx.strokeStyle = 'black'
ctx.stroke()
// 第二段折线
ctx.beginPath()
ctx.moveTo(300, 200)
ctx.lineTo(500, 400)
ctx.lineTo(300, 600)
ctx.strokeStyle = "blue"
ctx.stroke()
- moveTo(): 表示不从任何点开始，重新指定一个新的坐标点
- lineTo(): 表示从上一个点到另一个点
- beginPath() : 会清空坐标点，清空不是指还原到（0， 0）坐标点，而是没有，beginPath() + lineTo() 相当于一次 moveTo()
closePath()
这个和上面的 beginPath() 成对使用， 用于绘制封闭的多边形
比如绘制一个箭头：
ctx.beginPath()
ctx.moveTo(100, 350)
ctx.lineTo(500, 350)
ctx.lineTo(500, 200)
ctx.lineTo(700, 400)
ctx.lineTo(500, 600)
ctx.lineTo(500, 450)
ctx.lineTo(100, 450)
ctx.closePath()
ctx.strokeStyle = '#056'
ctx.stroke()
对于封闭图形进行填充 fill()
在上面代码的基础上，添加填充色：
# 状态的描述
ctx.fillStyle = 'orangered'
ctx.strokeStyle = '#056'
# 真正的绘制过程
ctx.fill()
ctx.stroke()
值得注意的是，上面的 fill() 和 stroke() 执行的先后顺序，对绘制的结果是不一样的，这需要注意!!!
绘制矩形 fillRect() strokeRect()
通过上面的学习，我们可以进行以下封装来写个函数用来绘制矩形：
/*
* @param ctx: canvas context
* @param x, y: 起点坐标
* @param width, height: 矩形宽高
* @param borderWidth: 描边宽度
* @param borderColor: 描边颜色
* @param fillColor: 填充颜色
*/
function drawRect(ctx, x, y, width, height, borderWidth, borderColor, fillColor) {
ctx.lineWidth = borderWidth();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.lineTo(x + width, y + height);
ctx.lineTo(x, y + heigth);
ctx.closePath()
ctx.fillStyle = fillColor;
ctx.strokeStyle = borderColor;
ctx.fill();
ctx.stroke();
}
// 绘制
drawRect(ctx, 100, 100, 200, 200, 10, 'green', 'red');
但是实际上，canvas本身就提供了矩形的绘制方法：
fillRect(x, y, width, height) 和 strokeRect(x, y, width, height)
上面的方法可以重构为：
function drawRect(ctx, x, y, width, height, borderWidth, borderColor, fillColor) {
ctx.lineWidth = borderWidth();
ctx.fillStyle = fillColor;
ctx.strokeStyle = borderColor;
ctx.fillRect(x, y, width, height);
ctx.strokeRect(x, y, width, height);
}
// 绘制一个填充为半透明的矩形
drawRect(200, 200, 200, 200, 10, 'green', 'rgba(0, 123, 12, 0.5)');
总结
学习了一些基本的方法和属性：
- moveTo()
- lineTo()
- beginPath(), closePath()
- strokeStyle, fillStyle 的基本用法
- lineWidth: 线条的宽度
- fill(), stroke()
- 矩形的基本绘制： fillRect(x, y, width, height), strokeRect(x, y, width, height)
