JavaScript 画布操作：Canvas API 绘制图形与动画-js教程-PHP中文网

JavaScript 画布操作：Canvas API 绘制图形与动画

夢幻星辰

发布： 2025-11-09 14:29:02

原创

361人浏览过

首先获取Canvas上下文并检查支持性，然后使用绘图方法绘制图形，通过requestAnimationFrame实现动画循环。具体步骤包括：1. 用getElementById获取canvas元素；2. 调用getContext('2d')获取2D渲染环境；3. 使用fillRect、arc等方法绘制矩形和圆形；4. 设置fillStyle、strokeStyle等属性定义样式；5. 在animate函数中利用clearRect清除画布，更新图形位置并重绘；6. 调用requestAnimationFrame持续执行动画；7. 使用fillText绘制文本，drawImage绘制图像。核心是掌握“清除-绘制-更新”循环机制。

javascript 画布操作：canvas api 绘制图形与动画

使用 JavaScript 操作 Canvas 绘制图形和实现动画，是前端可视化开发中的核心技能之一。通过 Canvas API，你可以在网页上绘制线条、形状、文字、图像，并创建流畅的动态效果。下面介绍如何从零开始使用 Canvas 进行基本绘图与简单动画制作。

获取 Canvas 上下文并准备绘图环境

要操作 Canvas，首先需要获取其 2D 渲染上下文。这个上下文对象提供了所有绘图方法。

在 HTML 中定义一个 <canvas> 元素，并设置宽高属性
使用 getContext('2d') 获取绘图环境
检查浏览器是否支持 Canvas

示例代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
  console.error('Canvas 不支持');
}

登录后复制

绘制基本图形

Canvas 提供了多种方法来绘制矩形、路径、圆形等基本图形。

立即学习“Java免费学习笔记（深入）”；

矩形：fillRect() 绘制实心矩形，strokeRect() 绘制边框，clearRect() 清除区域
路径（线条）：使用 beginPath() 开始路径，moveTo() 定位起点，lineTo() 绘制线段，stroke() 描边
圆形与弧线：arc(x, y, radius, startAngle, endAngle, anticlockwise) 可绘制圆或扇形
样式设置：fillStyle 设置填充色，strokeStyle 设置描边色，lineWidth 控制线条粗细

绘制一个红色圆形：

无限画

千库网旗下AI绘画创作平台

查看详情

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();

登录后复制

实现简单动画

Canvas 动画的本质是连续清除并重绘画面，利用 requestAnimationFrame 实现高效刷新。

定义一个动画函数，函数内更新图形位置或状态
使用 clearRect() 清除前一帧内容
重新绘制图形在新位置
递归调用 requestAnimationFrame 执行下一帧

让一个小球水平移动：

let x = 0;
<p>function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.beginPath();
ctx.arc(x, 100, 20, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();</p><p>x += 2; // 更新位置
if (x > canvas.width) x = 0; // 超出边界则回到起点</p><p>requestAnimationFrame(animate); // 下一帧
}
animate();

登录后复制

绘制文本与图像

除了几何图形，Canvas 还支持文本和图片渲染。

绘制文本：使用 fillText(text, x, y) 填充文字，strokeText() 描边文字；可通过 font 属性设置字体样式
加载图像：创建 Image 对象，onload 中使用 drawImage(img, x, y, width, height) 将其绘制到画布
注意：图像必须加载完成才能绘制，否则可能不显示

示例：绘制居中文字和一张图片

ctx.font = '24px Arial';
ctx.fillStyle = 'green';
ctx.fillText('Hello Canvas!', 150, 50);
<p>const img = new Image();
img.src = 'icon.png';
img.onload = function() {
ctx.drawImage(img, 200, 150, 100, 100);
};

登录后复制

基本上就这些。掌握 Canvas 的绘图流程和动画机制后，你可以进一步实现粒子系统、数据可视化、小游戏等复杂应用。关键是理解“清除-绘制-更新”的循环逻辑，以及合理使用坐标系和变换方法。不复杂但容易忽略细节，比如清屏顺序或单位弧度的使用。

以上就是JavaScript 画布操作：Canvas API 绘制图形与动画的详细内容，更多请关注php中文网其它相关文章！