JavaScript Canvas API 完整指南：从基础绘制到高级渲染

作者：交互手记时间：2026-10-24 03:51:45浏览：657

本文系统梳理了 JavaScript Canvas API 的核心内容，涵盖 HTMLCanvasElement 与 CanvasRenderingContext2D 的关键属性与方法。详细解析了矩形、文本、路径的绘制技巧，以及渐变、阴影、变换和像素操作的高级应用。同时包含离屏绘制等性能优化策略，帮助开发者掌握高效的前端图形渲染技术。

Canvas 基础与属性

HTMLCanvasElement 代表 HTML 中的 canvas 元素对象，是进行图形渲染的基础容器。

属性

height 属性用于设置或获取画布的高度。

width 属性用于设置或获取画布的宽度。

方法

getContext() 方法用于获取与 canvas 相关的可绘制上下文，通常传入 '2d' 参数。

toBlob()//(ie 不支持)此方法可以将<canvas>画布转换为base64格式的图片数据，我们可以通过设定参数指定转换的图片类型，甚至图片的清晰度

toDataURL() 方法可将 canvas 画布转换为 Data URL 格式的字符串，通常用于生成图片链接。

CanvasRenderingContext2D 对象通过 canvas.getContext('2d') 获取，是执行具体绘图操作的上下文环境。

基本图形绘制

绘制矩形

canvas.clearRect() 用于清除指定矩形区域内所有像素，使其恢复为初始颜色（通常为透明）。
canvas.fillRect() 用于填充矩形区域，支持纯色、渐变或图案填充。
canvas.strokeRect() 用于绘制矩形的边框（描边）。

绘制文本

canvas.fillText() 用于填充文本，支持纯色、渐变或图案。
canvas.strokeText() 用于绘制文本的边框（描边）。
canvas.measureText() 用于测量文本宽度，返回包含 width 属性的 TextMetrics 对象。

文本与样式设置

文本样式

canvas.font 属性用于设置字体相关样式，包括字号和字体信息，默认值为 '10px sans-serif'。
canvas.textAlign 属性用于设置文本水平对齐方式，支持 start（默认）、end、left、right 和 center。
canvas.textBaseline 属性用于设置文本基线对齐方式，支持 top、hanging、middle、alphabetic（默认）、ideographic 和 bottom。
canvas.direction 属性用于设置文本显示方向，支持 inherit（默认）、ltr 和 rtl。

填充和描边

canvas.fillStyle 属性用于设置填充样式，默认值为纯黑色 '#000000'。
canvas.fill() 方法用于对当前路径或形状进行填充。
canvas.strokeStyle 属性用于设置描边样式，默认值为纯黑色 '#000000'。
canvas.stroke() 方法用于对当前路径或形状进行描边。

渐变、阴影与路径

渐变相关

canvas.createLinearGradient() 方法用于创建线性渐变对象。
canvas.createRadialGradient() 方法用于创建径向渐变对象。

图案相关

canvas.createPattern() 方法用于创建图案，内容可以是图片、另一个 canvas 元素或渐变，返回 CanvasPattern 对象。

阴影相关

canvas.shadowBlur 属性用于设置阴影的模糊大小，默认值为 0。
canvas.shadowColor 属性用于设置阴影颜色，默认值为全透明黑色。
canvas.shadowOffsetX 属性用于设置阴影的水平偏移量，默认值为 0。
canvas.shadowOffsetY 属性用于设置阴影的垂直偏移量，默认值为 0。

绘制路径

canvas.beginPath() 用于开始一个新的绘图路径。
canvas.closePath() 用于闭合当前路径。
canvas.moveTo() 用于设置路径绘制的起始点坐标。
canvas.lineTo() 用于从当前点绘制直线到指定坐标点。
canvas.bezierCurveTo() 用于绘制贝塞尔曲线到指定坐标点。
canvas.quadraticCurveTo() 用于绘制二次贝塞尔曲线到指定坐标点。
canvas.arc() 用于绘制圆弧（包括完整的圆）。
canvas.arcTo() 用于绘制圆弧，并自动以直线连接前一点与圆弧起点。
canvas.rect() 用于绘制矩形路径。
canvas.ellipse() 用于绘制椭圆路径。
canvas.clip() 方法用于创建剪裁路径，此后绘制的内容仅显示在剪裁路径内部。

线条细节与变换

线条样式

canvas.lineWidth 属性用于设置线条宽度，主要用于描边，默认值为 1.0，支持小数。
canvas.lineCap 属性用于设置线条端点样式，支持 butt（默认，无端帽）、round（圆形端帽）和 square（方形端帽）。
canvas.lineJoin 属性用于设置线条转角样式，支持 miter（默认，尖角）、round（圆角）和 bevel（平角）。
canvas.miterLimit 属性用于限制尖角比率，防止小角度下尖角过长，默认值为 10。
canvas.getLineDash() 方法返回当前虚线设置的数组，包含偶数个元素。
canvas.setLineDash() 方法用于设置线条为虚线样式。
canvas.lineDashOffset 属性用于设置虚线的起始偏移量。

位置检测

canvas.isPointInPath() 方法用于判断指定点是否在当前路径内部。
canvas.isPointInStroke() 方法用于判断指定点是否在当前路径的描边线上。

变换

canvas.rotate() 方法用于旋转坐标系。
canvas.scale() 方法用于缩放坐标系。
canvas.translate() 方法用于平移坐标系原点。
canvas.transform() 方法用于在当前矩阵变换基础上应用新的矩阵变换。
canvas.setTransform() 方法用于直接将当前变换矩阵重置为指定矩阵。

透明度和层级

canvas.globalAlpha 属性用于设置全局透明度。
canvas.globalCompositeOperation 属性用于设置图形叠加时的混合方式，可控制绘制元素的上下层级关系。

图片处理与性能优化

图片与像素

canvas.drawImage() 方法用于将图片绘制到画布上。 //drawImage 优化: 离屏绘制: /* 上一节提到，绘制同样的一块区域，如果数据源是尺寸相仿的一张图片，那么性能会比较好，而如果数据源是一张大图上的一部分，性能就会比较差，因为每一次绘制还包含了裁剪工作。也许，我们可以先把待绘制的区域裁剪好，保存起来，这样每次绘制时就能轻松很多。 drawImage 方法的第一个参数不仅可以接收 Image 对象，也可以接收另一个 Canvas 对象。而且，使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。我们只需要实现将对象绘制在一个未插入页面的 Canvas 中，然后每一帧使用这个 Canvas 来绘制 */ canvas.createImageData()//创建一个新的空白的ImageData对象。 canvas.getImageData()//获取Canvas画布的设定区域的ImageData对象。 canvas.putImageData()//给定的ImageData对象应用在Canvas画布上。

状态管理与高级 API

Canvas状态

Canvas状态管理几个方法。
canvas.save() 方法用于存储当前 Canvas 的状态。
canvas.restore() 方法用于恢复 Canvas 到前一次存储的状态。
canvas.canvas 属性用于反向识别当前上下文源自哪个 HTMLCanvasElement。

其他方法

其他一些不常用的API方法。

canvas.drawFocusIfNeeded() 方法用于在给定元素被聚焦时，在当前路径周围绘制焦点环。
canvas.scrollPathIntoView() 方法用于将当前路径或给定路径滚动到视图中。