17、HTML5 Canvas动画、绘图与本地存储技术详解

d6e7f8

于 2025-11-20 13:33:18 发布

阅读量9

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5实战精华解读文章标签： HTML5 Canvas 动画绘制图形绘制

本文链接：https://blog.youkuaiyun.com/d6e7f8/article/details/155157910

HTML5实战精华解读专栏收录该内容

20 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

HTML5 Canvas动画、绘图与本地存储技术详解

1. Canvas动画绘制

在网页开发中，我们有时不仅需要在 <canvas> 元素中绘制静态形状，还希望这些形状能够动起来。实现 <canvas> 元素的动画效果，本质上就是绘制动画的一帧，然后在几毫秒后擦除该绘制内容，再重新绘制下一帧，可能会对某些元素进行轻微移动或其他更改。如果每秒显示约20 - 30帧，通常看起来就像是形状的平滑动画。

以下是一个移动红点的基本示例代码：

function draw_circle(x, y) {
    mycontext.fillStyle = "#f00";
    mycontext.beginPath();
    mycontext.arc(x, y, 10, 0, Math.PI * 2, true);
    mycontext.fill();
}
function erase_frame() {
    mycanvas.width = mycanvas.width;
}
var ball_x = 50;
var ball_y = 50;
var delta = 3;
draw_circle(ball_x, ball_y);
setInterval(function(){
    if (ball_x > 100 || ball_y < 15 || ball_x < 15 || ball_y > 100) {
        delta *= -1;
    }
    ball_x += del