<!-- 默认：宽300 高150 -->
<canvas>
不支持canvas的浏览器
</canvas>beginPath:开始绘制路径
moveTo:移动到绘制的新目标点
lineTo: 新的目标点
closePath:关闭路径，闭合，可以作为起止点闭合的连接
save
ctx.rect(100,100,100,100):绘制一个方块路径
ctx.save() //保存路径
//1st part
ctx.fillStyle = 'red' //after ctx.save() , this will not dirty 2nd part
ctx.beginPath()
ctx.moveTo(100,100)
ctx.lineTo(200,200)
ctx.lineTo(300,100)
ctx.closePath()
ctx.fill()
ctx.restore() // 与save()呼应，恢复路径
//2nd part
ctx.beginPath()
ctx.moveTo(100,200)
ctx.lineTo(200,200)
ctx.lineTo(300,100)
ctx.closePath()
ctx.stroke()arc(x,y,半径,起始弧度，结束弧度，旋转方向)
-x,y：起始位置
-弧度与角度的关系：弧度 = 角度*Math.PI/180
-旋转方向：顺时针（默认:false）、逆时针(true)
- arcTo(x1,y1,x2,y2,r)
—— 第一组坐标、第二组坐标、半径
—— arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。
drawImage(olmg,x,y,w,h)
- 设置背景
createPattern(oImg,平铺方式)
—— 参数：repeat/repeat-x/repeat-y/no-repeat
—— 偏移:从起始点为基准点，移动当前坐标位置
—— 旋转：参数为弧度
围绕画布（0，0）进行旋转
—— 缩放
context.createRadialGradient(x0,y0,r0,x1,y1,r1)
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始圆的x坐标 |
| y0 | 渐变开始圆的y坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变结束圆的x坐标 |
| y1 | 渐变结束圆的y坐标 |
| r1 | 结束圆的半径 |
measureText()
-- measureText(str).width 只有宽度，没有高度
-- 作用：文字居中
getImageData(x,y,w,h) 获取图像数据
putImageData(获取图像,x,y)设置新的图像数据
属性：
- data一个数组，包含每个像素的rgba四个值，注意每个值都是0~255之间的整数
- width：一行的像素个数
- height：一列的像素个数
createImageData(w,h)生成新的像素矩阵，初始值为全透明的黑色
#canvas{width:600px;height:300px} //这种写法导致，canvas等比例缩放，变成canvas图像默认值的2倍。canvas标签内设置的宽高才是真正画布的宽高
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage
- 绘制表盘的（时针）刻度
- 绘制表盘的（分针）刻度
- 绘制表盘数字刻度
- 绘制时针、分针、秒针
- 绘制中心点
- 绘制秒针的尾部（优化部分）
- 画圆
ctx.arc(x,y,r,开始弧度,结束弧度) - 画线
ctx.moveTo(x,y)ctx.lineTo(x1,y1) - 直角坐标系的计算方法
x = x0 + Math.cos(角度)*长度
y = y0 + Math.sin(角度)*长度 - 定时器
思路：
- 已知直角坐标系的中心点坐标（x0,y0）即canvas画布中心点位置。设定L = 长度
- 计算出时针的角度，通过直角坐标系的计算方法便得出时针刻度的位置。 （12个刻度进行循环便可全部绘制）
计算时针角度的方法：
-90 + i * (360 / 12)代码如下：
drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
for (let i = 0; i < scaleNum; i++) {
let angle = -90 + i * (360 / scaleNum) //角度
let [x1, y1] = [x0 + Math.cos(angle * Math.PI / 180) * maxL, y0 + Math.sin(angle * Math.PI / 180) * maxL]
let [x2, y2] = [x0 + Math.cos(angle * Math.PI / 180) * minL, y0 + Math.sin(angle * Math.PI / 180) * minL]
ctx.save()
ctx.beginPath()
ctx.lineWidth = scaleW
ctx.lineCap = "round"
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.stroke()
ctx.closePath()
ctx.restore()
}
}思路：
- 已知指针的起点坐标（x0,y0）
- 计算出指针的终点坐标（x1,y1）,便可通过
lineTo的方式进行绘制
如何计算终点坐标 与绘制刻度的思想式类似的
代码如下：
drawTimeNeedle(ctx, x0, y0, lineW, L, angle, color = '#000') {
let [x, y] = [x0 + Math.cos(angle * Math.PI / 180) * L, y0 + Math.sin(angle * Math.PI / 180) * L]
ctx.save()
ctx.beginPath()
ctx.strokeStyle = color
ctx.lineWidth = lineW
ctx.lineCap = "round"
ctx.moveTo(x0, y0)
ctx.lineTo(x, y)
ctx.stroke()
ctx.closePath()
ctx.restore()
},