目录
1.了解canvas
1.1 canvas元素
<canvas id="myCanvas" width="500" height="500"></canvas>
canvas有两个属性width、height，不设置默认width：300px、height：150px
1.2 兼容性
有些老的IE浏览器不支持<canvas>元素，可以使用内容提示或图片提示
<canvas>
您的浏览器不支持canvas
<!-- or -->
<img src="canvas.png" alt="">
</canvas>
1.3 支持性
let canvas = document.getElementById('myCanvas');
//判断是否支持canvas
if (canvas.getContext) {
console.log('支持')
} else {
console.log('不支持')
}
2.使用canvas
canvas绘图时以画布左上角坐标为原点（0，0）绘图
2.1 获取canvas绘图上下文
使用canvas.getContext('2d')获取canvas的2d上下文
var ctx = canvas.getContext('2d');
2.2 绘制demo
一个简单例子
<canvas id="myCanvas" width="500" height="500">
您的浏览器不支持canvas
</canvas>
<script>
function draw() {
let canvas = document.getElementById('myCanvas');
if (!canvas.getContext) return;
let ctx = canvas.getContext('2d');
//绘制矩形
ctx.fillRect(10, 10, 100, 100);
}
draw()
</script>
3.绘制矩形
strokeRect(x, y, width, height)：描边矩形。x,y代表矩形位置，widh, height代表矩形宽高。fillRect(x, y, width, height)：填充矩形。clearRect(x, y, widh, height)：清除矩形。
//在(10,10)位置填充一个宽高为100px的矩形
ctx.fillRect(10, 10, 100, 100);
//在(120,10)位置描边矩形
ctx.strokeRect(120, 10, 100, 100);
//在(50,10)位置清除矩形
ctx.clearRect(50, 10, 50, 50);
4.绘制path
图形是线条构成的，线条是由路径绘制而成。如：三角形就是由三条路径绘制而成。
绘制路径常用步骤：
①创建路径起点：beginPath()
②绘制路径：moveTo(x, y) ，lineTo(x, y) 或 arc(x, y, r, startAngle, endAngle, anticlockwise)
③闭合路径：closePath()
④描边/填充路径：stroke() / fill()
画布上就会显示路径。
4.1 绘制线条 lineTo
1.绘制一条直线
ctx.beginPath() //创建路径
ctx.moveTo(10, 130) //线条起始点移动到10，130
ctx.lineTo(130, 130) //绘制线条终点130，130
ctx.closePath() //闭合路径
ctx.stroke() //描边路径
2.绘制一个三角形
ctx.beginPath()
ctx.moveTo(30, 130)
ctx.lineTo(130, 130)
ctx.lineTo(100, 180)
ctx.closePath() //closePath 会把起点和终点连成一条线
ctx.stroke()
4.2 绘制圆 arc
arc(x, y, r, startAngle, endAngle, anticlockwise)：x,y为圆心坐标，r为半径，startAngle起始角度，endAngle终点角度，anticlosewise为旋转方向（true逆时针，false顺时针，默认顺时针）
示例：运用arc绘制太极图
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false); //绘制圆
ctx.stroke(); //描边
ctx.beginPath();
ctx.arc(220, 100, 50, 0, Math.PI * 2, false); //绘制圆
ctx.fill(); //填充
ctx.beginPath();
ctx.arc(340, 100, 50, 0, Math.PI, false); //绘制半圆
ctx.stroke(); //描边
5.设置线条宽度、颜色、连接点样式等
5.1 线条宽度 lineWidth
将上方第一个圆线条宽度设置为4个像素
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.lineWidth = 4;
ctx.stroke();
5.2 颜色 fillStyle、strokeStyle
颜色分为填充颜色fillStyle和描边颜色strokeStyle
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.lineWidth = 4;
ctx.strokeStyle = "rgb(139,193,255)"; //描边颜色rgb/rgba
ctx.stroke();
ctx.beginPath();
ctx.arc(220, 100, 50, 0, Math.PI * 2, false);
ctx.fillStyle = "#F77676"; //填充颜色 #xxxxxx
ctx.fill();
ctx.beginPath();
ctx.arc(340, 100, 50, 0, Math.PI, false);
ctx.lineWidth = 1;
ctx.strokeStyle = "green"; //描边颜色
ctx.stroke();
5.3 连接点样式 lineJoin
lineJoin有三种样式round、bevel、miter(默认值)
6. 平移、旋转
6.1 平移 translate
translate(x, y)：用来平移canvas画布的原点的位置
ctx.fillRect(10, 10, 100, 100);
ctx.save() //保存之前状态
ctx.translate(120, 120) //将坐标原点平移到(120,120)位置,此时(120,120)就相当于(0,0)
ctx.fillRect(0, 0, 100, 100); //在0,0位置绘制矩形
ctx.restore() //恢复之前保存的状态
6.2 旋转 rotate
rotate(angle)：顺时针旋转坐标轴。angle是 旋转弧度，如果想使用角度，可以把角度转成弧度，公式为：deg * Math.PI/180。
示例：运用arc绘制太极图
ctx.translate(100, 100) //将坐标原点平移到(100,100)位置
ctx.rotate(30 * Math.PI / 180) //旋转坐标轴30度
ctx.fillRect(0, 0, 100, 100);
7.绘制文字
绘制文字也是两种：填充文字fillText(text, x, y, maxWidth)和描边文字strokeText(text, x, y, maxWidth)
ctx.font = '30px Microsoft yahei';
ctx.fillStyle = 'rgb(139,193,255)';
ctx.fillText('文字', 200, 200); //填充文字
ctx.strokeStyle = "green";
ctx.strokeText('文字', 200, 250); //描边文字
8.绘制图片 drawImage
drawImage(img, x, y, width, height)：img是new Image()创建的img元素，width,height是图片的宽高
let img = new Image();// 创建img
img.onload = function () {
ctx.drawImage(img, 50, 50, 30, 30)
}
img.src = '../public/delete.png';
9.动画
使用requestAnimationFrame()或setInterval()写一个圆扩散的动画
let i = 1;
function draw() {
var canvas = document.getElementById('myCanvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');
//改变圆的透明度
ctx.clearRect(0, 0, 500, 500)
ctx.beginPath();
ctx.arc(100, 100, 50 + i * -30, 0, Math.PI * 2, false);
ctx.lineWidth = 4;
ctx.fillStyle = "rgb(139,255,255," + i + ")";
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 30 + i * -30, 0, Math.PI * 2, false);
ctx.lineWidth = 4;
ctx.fillStyle = "rgb(139,193,255," + i + ")";
ctx.fill();
i < 0 ? i = 1 : i -= 0.01;
requestAnimationFrame(draw)
}
draw()
//或者
// setInterval(() => {
// i < 0 ? i = 1 : i -= 0.1;
// draw()
// }, 200)
10.状态 save、restore
save()：保存canvas的状态。save之后可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
restore()：恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
ctx.fillRect(10, 10, 100, 100);
ctx.save() //保存上边的矩形状态
ctx.translate(120, 120) //保存后平移画布中心点，原点平移到(120,120)的位置
ctx.fillRect(0, 0, 100, 100);
ctx.restore() //恢复之前的保存状态
ctx.save() //保存上边的矩形状态
ctx.translate(300, 220) // 保存后平移画布原点，原点平移到(300,220)的位置
ctx.rotate(45 * Math.PI / 180) //旋转45度
ctx.fillRect(0, 0, 100, 100);
ctx.restore() //恢复之前的保存状态
