JavaScript的Canvas是什么？如何使用它绘制图形和动画？

来源：站长查询作者：高宇头衔：草根站长

导读：本期聚焦于小伙伴创作的《JavaScript的Canvas是什么？如何使用它绘制图形和动画？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《JavaScript的Canvas是什么？如何使用它绘制图形和动画？》有用，将其分享出去将是对创作者最好的鼓励。

JavaScript的Canvas是HTML5规范中新增的画布元素，它提供了一个可以通过JavaScript脚本动态绘制图形的区域，支持2D和3D（通过WebGL）两种渲染模式，其中2D模式是日常开发中使用频率最高的场景。Canvas本身只是一个空白的容器，所有的绘制逻辑都需要通过JavaScript操作对应的上下文对象来完成，它没有保留绘制对象的状态，每一次绘制都是直接作用在像素上的，这一点和SVG的矢量保留模式有明显区别。

Canvas基础使用流程

要使用Canvas绘制内容，首先需要完成基础的初始化工作，整体流程分为三步：

在HTML中定义<canvas>元素，设置宽度和高度属性
通过JavaScript获取<canvas>元素，调用getContext('2d')方法获取2D绘制上下文
调用上下文对象提供的绘制方法完成图形渲染

初始化示例

下面是基础的Canvas初始化代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas基础示例</title>
</head>
<body>
    <!-- 定义Canvas元素，注意宽高建议直接写在标签属性上，避免样式缩放导致绘制模糊 -->
    <canvas id="myCanvas" width="800" height="400">
        您的浏览器不支持Canvas元素，请升级浏览器版本
    </canvas>
    <script>
        // 获取Canvas元素
        const canvas = document.getElementById('myCanvas');
        // 获取2D绘制上下文
        const ctx = canvas.getContext('2d');
        // 后续绘制逻辑都基于ctx对象操作
    </script>
</body>
</html>

Canvas基础图形绘制方法

2D上下文提供了多种基础图形的绘制API，常用的包括矩形、路径（圆形、多边形等）、文本和图像的绘制。

矩形绘制

矩形是最简单的图形，Canvas提供了三个直接操作矩形的方法：

fillRect(x, y, width, height)：绘制填充矩形
strokeRect(x, y, width, height)：绘制矩形描边
clearRect(x, y, width, height)：清除指定区域的像素

绘制一个红色填充矩形和蓝色描边矩形的示例如下：

// 绘制填充矩形，参数分别是起点x、起点y、宽度、高度
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(50, 50, 200, 100);

// 绘制描边矩形
ctx.strokeStyle = 'blue'; // 设置描边颜色
ctx.lineWidth = 3; // 设置描边宽度
ctx.strokeRect(300, 50, 200, 100);

// 清除中间区域的内容
ctx.clearRect(150, 80, 200, 40);

圆形和其他路径绘制

Canvas没有直接的圆形绘制方法，需要通过路径（Path）来绘制，路径绘制的通用流程是：

调用beginPath()开启新路径
调用路径定义方法（如arc()画圆弧、moveTo()移动起点、lineTo()画直线）
调用closePath()闭合路径（可选，多边形需要）
调用fill()填充路径或stroke()描边路径

绘制一个圆形的示例如下：

// 开启新路径
ctx.beginPath();
// 绘制圆弧：arc(圆心x, 圆心y, 半径, 起始弧度, 结束弧度, 是否逆时针)
// 0到2π的弧度就是一个完整的圆
ctx.arc(400, 200, 80, 0, Math.PI * 2, false);
// 设置填充颜色并填充
ctx.fillStyle = 'green';
ctx.fill();
// 设置描边并描边
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();

Canvas动画实现原理

Canvas动画的核心原理是逐帧重绘：先清除上一帧的内容，再绘制当前帧的内容，利用人眼的视觉暂留效应形成连续的动画效果。浏览器提供了两个常用的逐帧回调API：

requestAnimationFrame(callback)：浏览器专门为动画优化的API，会在下一次重绘前调用回调，帧率和浏览器刷新率一致，性能优于setInterval
setInterval(callback, delay)：按固定时间间隔执行回调，帧率不固定，可能出现丢帧

简单动画示例：移动的圆形

下面实现一个在Canvas中左右来回移动的圆形动画：

// 定义圆形的初始位置和移动速度
let circleX = 100;
let circleY = 200;
let speed = 2;
// 移动方向，1表示向右，-1表示向左
let direction = 1;

// 动画绘制函数
function animate() {
    // 清除整个Canvas的内容，避免上一帧残留
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 更新圆形的位置
    circleX += speed * direction;
    // 边界检测，碰到左右边界就反向
    if (circleX + 80 > canvas.width || circleX - 80 < 0) {
        direction = -direction;
    }
    
    // 绘制当前帧的圆形
    ctx.beginPath();
    ctx.arc(circleX, circleY, 80, 0, Math.PI * 2, false);
    ctx.fillStyle = 'purple';
    ctx.fill();
    
    // 请求下一帧动画
    requestAnimationFrame(animate);
}

// 启动动画
animate();

注意事项

Canvas的宽高属性如果通过CSS设置，会导致绘制的内容被拉伸缩放，产生模糊，建议直接写在<canvas>标签的width和height属性上
Canvas绘制的内容是像素化的，放大后会模糊，不适合需要高缩放质量的场景，这类场景更适合使用SVG
复杂动画中如果需要频繁操作大量图形对象，建议维护一个对象列表，每一帧遍历列表重绘所有对象，方便管理状态

JavaScript Canvas 绘制图形动画 HTML5修改时间：2026-06-21 01:45:40

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。