什么是Canvas？
Canvas是H5新增的一个标签，我们可以通过js在这个标签上绘制各种图案
Canvas拥有多种绘制路径、矩形、圆形、字符以及图片的方法
Canvas画图步骤
- 创建一个canvas标签
默认宽度300px，默认高度150px
<canvas></canvas>
- 通过js代码拿到canvas标签
let oCanvas = document.querySelector("canvas");
- 从canvas标签中获取到绘图工具
let oCtx = oCanvas.getContext("2d");
- 通过绘图工具在canvas标签上绘制图形
以绘制直线为例
// 4.1 设置路径的起点
oCtx.moveTo(50, 50); // (x, y)
// 4.2 设置路径的终点
oCtx.lineTo(200, 50); // (x, y)
// 4.3 告诉canvas将这些点连接起来
oCtx.stroke();
修改canvas标签宽高
// 拉伸，会影响到内容大小
canvas{
width: 500px;
height: 500px;
}
// 通过行内属性修改，内容不会被拉伸
<canvas width="500" height="500"></canvas>
线条默认宽度和颜色
- 通过canvas绘制的线条默认宽度是1px，颜色是纯黑色
- 但是由于默认情况下canvas会将线条的中心点和像素的底部对齐
- 所以会导致显示效果是2px和非纯黑色问题
解决方法：
// 4.1 设置路径的起点
oCtx.moveTo(50, 50.5); // (x, y)
// 4.2 设置路径的终点
oCtx.lineTo(200, 50.5); // (x, y)
// 4.3 告诉canvas将这些点连接起来
oCtx.stroke();
canvas线条属性
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
// 修改线条的高度
oCtx.lineWidth = 20;
// 修改线条的颜色
oCtx.strokeStyle = "blue";
// 修改线条两端样式，butt默认、round、square
oCtx.lineCap = "round";
// 修改线条样式([虚线每一段的宽度, 每段虚线间的间隙])
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.stroke();
canvas绘制多条直线
- oCtx.beginPath();重新开启路径。不重新开始路径的话样式不变
- 为了让绘制不相互影响，每次在绘制新路径之前，调用oCtx.beginPath();开启新的路径
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
// 在画之前可以修改样式
oCtx.lineWidth = 20;
oCtx.strokeStyle = "blue";
oCtx.lineCap = "round";
oCtx.stroke();
// 重新开始路径
oCtx.beginPath();
oCtx.moveTo(50, 100);
oCtx.lineTo(200, 100);
// 在画之前重新设置样式
oCtx.lineWidth = 20;
oCtx.strokeStyle = "blue";
oCtx.lineCap = "round";
oCtx.stroke();
canvas绘制三角形
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
oCtx.beginPath();
// 绘制三个点
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.lineTo(200, 200);
// 注意点，需要手动回到起点
oCtx.lineTo(50, 50);
// 加宽后发现，lineTo会出现转角缺失现象
oCtx.lineWidth = 20;
oCtx.stroke();
使用closePath()解决上述问题
let oCanvas = document.querySelector("canvas");
let oCtx = oCanvas.getContext("2d");
oCtx.beginPath();
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.lineTo(200, 200);
oCtx.closePath();
oCtx.lineWidth = 20;
// 设置转角样式，miter默认、round、bovel
oCtx.lineJoin = "bovel";
oCtx.stroke();
填充图形
oCtx.beginPath();
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.lineTo(200, 200);
oCtx.closePath();
oCtx.fillStyle = "blue"; // 填充颜色
oCtx.fill(); // 填充图形
若要在图形与另一图形之间填充颜色，需要注意连接点是顺时针还是逆时针
- 内外矩形均是顺时针
- 外矩形顺时针，内矩形逆时针
- 非零环绕规则
- 判断哪里是否要填充，就从哪里引出直线
- 与直线相交的向量指向顺时针方向，+1
- 与直线相交的向量指向逆时针方向，-1
- 结果大于0则要填充该区域，否则不填充
oCtx.beginPath();
oCtx.moveTo(100, 100);
oCtx.lineTo(300, 100);
oCtx.lineTo(300, 300);
oCtx.lineTo(100, 300);
oCtx.closePath();
oCtx.moveTo(250, 150);
oCtx.lineTo(150, 150);
oCtx.lineTo(150, 250);
oCtx.lineTo(250, 250);
oCtx.closePath();
oCtx.fill(); // 填充图形
绘制虚线
// 修改线条样式
// ([虚线每一段的宽度, 每段虚线间的间隙])
// 三个参数的自己试一下([])
oCtx.setLineDash([5, 20]);
// 获得虚线的格式
console.log(oCtx.getLineDash());
// 设置虚线偏移位
oCtx.lineDashOffset = -50;
oCtx.moveTo(50, 50);
oCtx.lineTo(200, 50);
oCtx.stroke();
绘图工具方法及属性总结
beginPath() // 路径重新开始，清除前面一切样式
moveTo(x, y) // 起点
lineTo(x, y) // 绘制点
closePath() // 闭合路径，终点自动连接起点
lineWidth // 线条宽度
strokeStyle // 线条颜色
lineCap // 线条两端样式
lineJoin // 线条连接处拐角样式
fillStyle // 填充颜色
// 设置线条样式
setLineDash([虚线每一段的宽度, 每段虚线间的间隙])
getLineDash() // 获得虚线的格式
lineDashOffset // 设置虚线偏移位
stroke(); // 绘制线条
fill(); //填充，注意非零环绕规则
