HTML5 Canvas 绘图基础与性能优化指南

作者：霁月时间：2026-10-31 16:31:57浏览：384

本文详细介绍 HTML5 Canvas 元素的基本使用方法，涵盖线条、矩形、圆形及文本的绘制技巧。通过示例解析动画实现原理，并深入探讨减少绘制次数、使用离屏 Canvas 缓存及避免频繁 DOM 操作等性能优化策略，帮助开发者高效构建前端图形应用。

一、Canvas 概述

Canvas 作为 HTML5 引入的新元素，支持在网页中渲染图像、动画及各类视觉特效。它如同画布，允许用户在其上绘制图形与文字，具备高性能、支持复杂交互及良好兼容性等优势。

二、Canvas 的基本使用

在 HTML 中应用 Canvas 极为简便，仅需嵌入一个 Canvas 标签：

<canvas id="myCanvas" width="500" height="500"></canvas>

上述代码创建了一个 id 为 myCanvas 的 Canvas 元素，宽高均设为 500。随后可通过 JavaScript 获取其上下文对象，进而执行图形与文本的绘制操作。

三、绘制图形

Canvas 提供了丰富的 API 以绘制线条、矩形、圆形及弧形等图形。以下列举几种常用绘图方法：

1. 绘制线条

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

代码首先获取 Canvas 上下文，接着调用 moveTo() 设定起点，lineTo() 设定终点，最后通过 stroke() 完成线条绘制。

2. 绘制矩形

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");
 ctx.fillRect(50,50,100,100);

代码获取 Canvas 上下文后，利用 fillRect() 绘制矩形，其参数依次指定左上角坐标 (x, y) 以及矩形的宽度和高度 (width, height)。

一、Canvas 概述

3. 绘制圆形

var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fill();

代码获取上下文后，先调用 beginPath() 开启路径，再用 arc() 绘制圆形，参数涵盖圆心坐标、半径、起始及终止角度，最后通过 fill() 填充圆形。

一、Canvas 概述

四、绘制文本

Canvas 支持文本绘制，可配置字体、大小及颜色等属性。常见方法如下：

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial"; ctx.fillStyle = "red"; 
ctx.fillText("Hello World", 50, 50);

代码获取上下文后，通过 font 属性设定字体与大小，fillStyle 设定颜色，最后调用 fillText() 绘制文本，参数包含文本内容及左上角坐标。

一、Canvas 概述

五、Canvas 动画

Canvas 可通过连续绘制图形实现动画效果。示例如下：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); 
var x = 0;
function draw() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
 x++;
 requestAnimationFrame(draw);
 }
 requestAnimationFrame(draw);

代码获取上下文后，定义变量 x 表示矩形横坐标，并创建 draw() 函数以不断绘制并移动矩形。最后利用 requestAnimationFrame() 循环调用 draw() 实现动画。