主题
Canvas
Canvas 基础
canvas 是 inline 盒。
html
<canvas id="canvas"></canvas>canvas 所有核心接口都在 canvas 的绘制上下文中。
js
/**
* @type {HTMLCanvasElement}
*/
const canvas = document.getElementById('canvasId')
canvas.width = 300 // canvas 宽度，以 CSS 像素（px）表示，默认 300
canvas.height = 300 // canvas 宽度，以 CSS 像素（px）表示，默认 150
const ctx = canvas.getContext('2d') // 2d 绘图直线
- beginPath()：
beginPath会清空子路径列表开始一个新路径。 - moveTo(x, y)：将一个新的子路径的起始点移动到 (x，y) 坐标。
- lineTo(x, y)：使用直线连接子路径的终点到 (x, y) 坐标。
- closePath()：笔点返回到当前子路径起始点的方法。
绘制矩形的简易 API
实际上，掌握了直线的绘制即掌握了矩形的绘制，但是为了更方便，官方也提供了绘制矩形的简易 API。
曲线
- arc(x, y, radius, startAngle, endAngle[, counterclockwise])：圆弧路径的圆心在 (x, y) 位置，半径为 r，根据 counterclockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
- arcTo(x1, y1, x2, y2, radius)：根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。
- quadraticCurveTo(cpx, cpy, x, y)：二次贝塞尔曲线，可通过 可视化示例 帮助理解。
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：三次贝塞尔曲线。可通过 可视化示例 帮助理解。
- ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle[, counterclockwise])：椭圆的圆心在（x,y）位置，半径分别是 radiusX 和 radiusY，按照 anticlockwise（默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。
动作
绘制动作
- stroke()：画线绘制。
- stroke([path])：根据 Path2D 画线绘制。
- fill([fillRule])：填充样式，默认规则为 nonzero。
- fill(path[, fillRule])：根据 Path2D 填充样式。
stroke 样式
- strokeStyle：指定绘制线条的样式，可取值：color、gradient、pattern。
- lineWidth：指定线宽。
- lineCap：指定绘制线条两头的形状，可取值：butt（默认值）、round、square。
- lineJoin：指定绘制线条之间的交叉形状，可取值：miter（默认值）、bevel、round。
- miterLimit：需配合
lineJoin = miter来使用。
fill 样式
状态保存
图形变换
阴影
透明度
遮挡效果
剪切
清空区域
文字
- font：同 css font。
- textAlign：文本的对齐方式。
- textBaseLine：文本基线对齐方式。
- strokeText(string, x, y [, maxlen])：绘制文字轮廓。
- fillText(string, x, y [, maxlen])：填充文本。
- measureText(string)：返回 TextMetrics 对象。
图片
drawImage(image, dx, dy)drawImage(image, dx, dy, dWidth, dHeight)drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
js
const image = new Image()
image.src = 'https://picsum.photos/200/300'
image.onload = function () {
// ctx.drawImage(...)
}绘制虚线
检测是否在路径内
参阅
拓展库：
- roughjs：手绘图形