Canvas：是什么、渲染方法及工作原理

什么是Canvas？

Canvas是屏幕上的一个矩形区域，程序在此使用绘图上下文逐像素进行渲染。该概念于2004年作为WHATWG规范的一部分诞生于HTML5 Web标准中，此后成为所有平台上图形的基础。

Canvas与声明式方法（SVG、UI组件）的主要区别在于Canvas不存储场景。渲染后像素被固定，要更改图像，程序必须擦除并重新绘制所需区域。这在动画时提供最大性能，并且场景存储的内存消耗最小。

Canvas支持两种类型的上下文：用于平面图形的2D和通过GPU硬件加速进行三维渲染的WebGL/WebGL2。根据Statista（2025），Canvas API在89%的浏览器游戏和67%的Web编辑器中使用。

对于移动开发，Canvas在每个平台上都有适配：在Android中通过同名类Canvas，在iOS中通过Core Graphics和Metal，在.NET MAUI中通过Microsoft.Maui.Graphics。统一的原则——绘图上下文、坐标系和变换栈——无论平台如何都保持不变。

Canvas元素

画布表示一个固定大小的位矩阵，以像素为单位指定。每个像素存储RGBA值——红色、绿色、蓝色通道和Alpha透明度。Canvas坐标系从左上角开始，X轴向右，Y轴向下。

画布的大小由两个参数决定：以像素为单位的宽度和高度。重要的是要区分画布的width和height属性与CSS大小——CSS可以缩放可见区域，但内部分辨率仍由属性决定。这些参数的不匹配会导致图像模糊。

在Android中，Canvas的大小通常与其创建的View或Bitmap的大小一致。在onDraw()时，传递的Canvas已根据视图大小配置——开发人员无需手动设置大小。

Canvas如何工作？

Canvas通过绘图上下文工作——一个存储当前状态的对象：填充颜色、线条粗细、变换和路径。所有绘图方法的调用都应用于此状态并修改画布的位矩阵。

渲染过程遵循管道：清除区域→设置状态→构建路径→描边或填充。在动画中，此循环每秒重复60次，需要优化每一步以保持流畅。

Canvas使用即时模式渲染，即每个绘图命令立即执行。与保留模式（SVG或DOM）不同，Canvas不存储对象列表。这减少了内存消耗，但使交互性变得复杂——开发人员自己实现命中检测和重绘。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

在上面的示例中，我们获取2D上下文，设置填充颜色，绘制矩形，然后设置字体并显示文本。所有操作都在画布上执行，其大小由元素的width和height属性指定。

Canvas状态栈允许保存和恢复绘图参数。save()方法将当前状态放入栈中，restore()恢复上一个状态。这在级联变换中很方便，当需要对一组元素应用平移或旋转而不影响其他元素时。

Canvas API的主要方法

Canvas API提供了大约40种方法用于渲染图元、图像、文本和管理样式。基本集包括处理矩形、路径、弧线和文本的方法。让我们来看一下主要的方法组。

绘制图元

矩形——Canvas最快的图元。fillRect(x, y, w, h)方法绘制填充矩形，strokeRect()——仅边框，clearRect()——清除区域。对于复杂多边形，使用Path2D对象，可以在帧之间重复使用。

处理图像

drawImage()——在Canvas上渲染位图图像的主要方法。该方法接受三组参数：简单复制、缩放和裁剪缩放。图像可以从HTMLImageElement、SVGImageElement或其他Canvas加载。

对于移动开发，关键的是drawImage()在Android中与Bitmap一起使用，在iOS中与UIImage一起使用。当图像和Canvas位于同一GPU纹理内存中时，平台实现使用硬件加速。如果图像颜色配置文件不匹配，由于转换可能导致性能损失。

Canvas上的动画

requestAnimationFrame()——Canvas动画的标准机制。与setInterval不同，此方法将渲染与屏幕刷新率同步（通常为60 FPS）。当标签页在后台时，浏览器停止调用以节省电池。

为了优化Canvas动画，应最小化重绘区域：而不是清除整个画布，仅在更改的区域使用clearRect()。将元素分组到一层并在离屏Canvas中缓存静态部分可减少渲染管道的负载。

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

动画循环清除画布，更新对象位置并重新绘制它。requestAnimationFrame保证流畅性并在标签页隐藏时自动暂停，节省设备资源。

移动开发中的Canvas

Canvas在移动平台上的实现有所不同，但都基于程序化画布的通用概念。在Android中，Canvas类是图形系统的一部分，传递给任何View的onDraw(Canvas)方法。在iOS中，等效的是Core Graphics和CGContext上下文。

Android中的Canvas

Android Canvas与Bitmap或SurfaceView配合使用。通过Bitmap创建Canvas时，渲染在内存中进行；而通过SurfaceView时，直接渲染到屏幕并支持硬件加速。从API 14+开始，Canvas使用HWUI——将绘图命令转换为OpenGL或Vulkan的硬件加速器。

Android Canvas的关键方法包括drawBitmap()、drawCircle()、drawLine()和drawPath()。所有方法都接受Paint——管理样式的对象：颜色、粗细、抗锯齿效果。根据Google I/O（2024），HWUI上的Canvas与软件渲染相比性能提升高达40%。

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

在Android中，Canvas默认从API 14+使用硬件加速。对于复杂图形，建议使用SurfaceView或TextureView，它们分配单独的图层以便在后台线程中渲染。这可以防止在密集动画期间阻塞UI线程。

iOS中的Canvas

Core Graphics——Apple用于位图和矢量图形的框架，是Canvas的对应物。CGContext上下文提供绘制线条、曲线、渐变和阴影的方法。在SwiftUI中，Canvas通过iOS 15中添加的Canvas结构体可用。

SwiftUI Canvas使用GraphicsContext——Core Graphics上的类型安全包装。开发人员使用GraphicsContext，它支持变换、图层和符号。与UIKit不同，SwiftUI Canvas自动处理Retina屏幕和动态类型。

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

SwiftUI Canvas以声明式语法和自动渲染优化而著称。框架自身确定在状态更改时需要重新绘制画布的哪些部分。GraphicsContext通过drawLayer方法支持图层，简化了多层图形的创建。

Canvas性能

Canvas性能取决于三个因素：重绘区域、绘图调用次数和操作复杂度。每次绘图方法调用都是一个通过管道的命令：CPU形成命令，GPU执行光栅化。

优化的基本原则——最小化调用次数。与其绘制1000个单独的点，不如使用包含1000个线段的路径——一次stroke()调用代替1000次。第二条规则——静态缓存：将不变的元素移到离屏Canvas并通过drawImage()复制。

性能分析工具：用于Web的Chrome DevTools Performance、用于Android的GPU Inspector和用于iOS的Instruments。根据Google Chrome Developers（2025），70%的Canvas性能问题是由过度重绘和缺乏图层缓存引起的。

对于移动设备，节省电池至关重要。过度渲染会加重GPU负担并缩短运行时间。在Android中使用willBePresented()方法，在iOS中使用displayLink与屏幕刷新率同步。

Canvas的高级功能

现代Canvas已超越简单2D渲染的范畴。基于CanvasContext的WebGL可以通过硬件加速渲染三维图形。OffscreenCanvas将繁重的渲染转移到Web Workers，而不阻塞UI线程。

通过Canvas使用WebGL

WebGL是一种Canvas上下文，提供从浏览器访问OpenGL ES的途径。开发人员不是使用fillRect()，而是用GLSL编写着色器并将几何体加载到缓冲区中。根据Statista（2025），92%的移动浏览器支持WebGL 2.0，这使得Canvas成为Web游戏和3D可视化的基础。

Canvas作为WebGL的容器简化了2D和3D图形在同一应用程序中的集成。例如，3D场景通过WebGL渲染，而UI覆盖层通过同一画布的2D上下文渲染。混合渲染需要管理Z顺序和帧率同步。

OffscreenCanvas

OffscreenCanvas——用于将渲染转移到后台线程的API。与常规Canvas不同，OffscreenCanvas不绑定到DOM，可以在Web Worker中使用。这允许与主线程并行执行复杂的图形计算而不会导致FPS下降。

将准备好的帧从Worker传输到主线程通过transferControlToOffscreen()和commit()进行。根据Chrome Platform Status（2025），OffscreenCanvas在87%的浏览器中得到支持，并推荐用于密集渲染的应用程序——图形编辑器、图表和动画。