当前位置：首页 > 文章列表 > 文章 > 前端 > CanvasAPI绘图与动画制作教程

CanvasAPI绘图与动画制作教程

2025-12-18 11:54:32 0浏览收藏

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

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

在 HTML 中定义一个
使用 getContext('2d') 获取绘图环境
检查浏览器是否支持 Canvas

示例代码：

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

绘制基本图形

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

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

绘制一个红色圆形：

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;
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();
x += 2; // 更新位置
if (x > canvas.width) x = 0; // 超出边界则回到起点
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);
const img = new Image();
img.src = 'icon.png';
img.onload = function() {
ctx.drawImage(img, 200, 150, 100, 100);
};

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。