如何使用Canvas及动画实现

最新推荐文章于 2025-06-05 19:41:35 发布

原创最新推荐文章于 2025-06-05 19:41:35 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #Canvas

Web开发专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas API的基本用法，包括如何在网页中定义和获取Canvas对象，绘制基本形状如矩形，以及如何使用路径绘制更复杂的图形。同时，文章还提供了关于动画、错误避免和最佳实践的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使用Canvas及其动画实现

什么是Canvas?

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素–。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

定义和用法

首先，在HTML元素中定义一个canvas标签

<canvas id="tutorial" width="150" height="150"></canvas>

获取CANVAS对象及渲染上下文

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

基本形状

fillRect(x, y, width, height)
绘制一个填充的矩形

strokeRect(x, y, width, height)
绘制一个矩形的边框

clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。

function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 ctx.fillRect(25,25,100,100);
 ctx.clearRect(45,45,60,60);
 ctx.strokeRect(50,50,50,50);
 }
}

绘制路径

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

常用命令

beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()
通过线条来绘制图形轮廓。

fill()
通过填充路径的内容区域生成实心的图形。

移动笔触

一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

moveTo(x, y)
将笔触移动到指定的坐标x以及y上。

function draw() {
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx.stroke();
 }
}

更多详细的例子请参考MDN文档
MDN–使用Canvas绘制图形

常见错误

图形失真

不要使用style属性来设置width和height

本质上，canvas画布等同于一张位图，它拥有自己的width和height属性，这相当于设置了分辨率

<canvas width=100 height=100></canvas>

这相当于一张100*100分辨率的图片，如果我们使用style属性强行将其方法

<canvas width=100 height=100 style="width:1000px;height:1000px"></canvas>

这样图片就会变得及其的模糊。

再强调一次：

不要使用style来设置canvas的宽度和高度！！！

图形连笔

连笔是由于在绘制需要断开连线的时候没有移动笔触导致。使用moveTo()函数来避免这个问题

动画无法清空画布

有的时候我们发现明明已经使用了clearRect()函数来清空画布，但是还是无效。

这里的小细节不容易发现，在绘制路径开始之前通常需要加上beginPath()方法。否则使用路径的动画无法清空画布。