# canvas

# canvas是什么

Canvas是HTML5中的一个重要元素，它可以用JavaScript在网页上绘制图像，制作动画等。Canvas的使用非常灵活，可以用于数据可视化、游戏开发、图像处理等多个领域。

# 常用API

# 矩形绘制

fillRect(x, y, width, height) 填充矩形

strokeRect(x, y, width, height) 表变矩形

# 路径绘制

beginPath() 创建新的路径组

closePath() 闭合路径

stroke() 路径描边

fill() 路径范围填充

moveTo() 移动起笔点

lineTo() 绘制直线

arc() 绘制弧线（圆）

arcTo() 绘制圆角

quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制三次贝塞尔曲线

rect(x, y, width, height) 绘制矩形路径（会自动调用moveTo方法）

path2D 使用路径相关数据

# 清空画布

clearRect(x, y, width, height)

# 样式修改

fillStyle = color 填充颜色

strokeStyle = color 描边颜色

globalAlpha = transparencyValue 全局透明度

lineWidth = value 路径宽度

lineCap = type 路径两头的帽子形态

lineJoin = type 路径连接点形态

miterLimit = value 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。

getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组

setLineDash(segments) 设置当前虚线样式

lineDashOffset = value 虚线样式的起始偏移量

# 绘制文字

fillText(text, x, y [, maxWidth])

strokeText(text, x, y [, maxWidth])

# 路径的绘制逻辑

1. 绘制路径时一定要注意 这个笔在哪里 哪里是起笔点 绘制完后笔停留在哪里 非常重要，路径的数据在整个绘制过程中是连续的
2. 路径 显示绘制隐形的 最后要上色
3. 绘制路径的逻辑是特有的 其他的比如 矩形 文字 没有那个起笔落笔的逻辑