HTML宝典(第 1 版)
4.8 绘制动画
阅读(

HTML基础

HTML元素

表单及应用

Canvas绘图基础

基本用法

使用路径

绘制文本

处理图像和视频

装饰图形

画布变换

保存恢复状态

绘制动画

虽然canvas的API并未直接提供支持动画的方法,但就其本身而言,在canvas中实现动画效果也很简单:只需要持续的更新并重绘画布就行了。这种持续的更新并重绘就叫做动画循环,它是所有动画的核心逻辑。

在canvas中实现动画,首先需要初始化画布上的对象。然后,启动一个动画循环来更新画布、清除画布、重绘画布,再请求下一个新的动画帧。Canvas动画的基本原理如图 4‑36 所示:

canvas动画的基本原理
图4-36 canvas动画的基本原理

接下来通过一个简单实例,来看看canvas动画的实现过程。该实例以动画的方式,实现一个旋转的八卦图。代码如下:

function clear() {  
   context.clearRect(0, 0, canvas.width, canvas.height);
}

function rotate() {
   context.rotate(Math.PI/30);  // 每分钟旋转一周
}

function draw () {
    // 绘制白色半圆
   context.beginPath();
   context.arc(0, 0, 80, 1.5*Math.PI, Math.PI/2, false);
   context.fillStyle = "white";
   context.closePath();
   context.fill();
           
   // 绘制黑色半圆
   context.beginPath();
   context.arc(0, 0, 80, Math.PI/2, 1.5*Math.PI, false);
   context.fillStyle = "black";
   context.closePath();
   context.fill();
           
    // 绘制黑色小圆
    context.beginPath();
    context.arc(0, 40, 40, 0, Math.PI*2, true);
    context.fillStyle = "black";
    context.closePath();
    context.fill();
           
    // 绘制白色小圆
    context.beginPath();
    context.arc(0, -40, 40, 0, Math.PI*2, true);
    context.fillStyle = "white";
    context.closePath();
    context.fill();
           
    // 绘制白色小圆心
    context.beginPath();
    context.arc(0, -40, 5, 0, Math.PI*2, true);
    context.fillStyle = "black";
    context.closePath();
    context.fill();
           
    // 绘制黑色小圆心
    context.beginPath();
    context.arc(0, 40, 5, 0, Math.PI*2, true);
    context.fillStyle = "white";
    context.closePath();
    context.fill();
}

function drawStage() {
     rotate();  // 更新
     clear();   // 清除
     draw();    // 重绘
}

window.onload = function(){
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
          
    context.translate(canvas.width/2, canvas.height/2);
          
    setInterval(drawStage, 100);
};

上述代码,当页面加载完成后,首先进行初始化,然后调用setInterval(drawStage, 100)方法启动动画循环,在动画循环中,每隔100ms会调用一次drawStage ()函数,来执行更新画布、清除画布、重绘画布的操作,以实现动画效果。运行结果如图 4‑37 所示:

旋转的八卦图
图4-37 旋转的八卦图

当然,这里只是为了演示实现动画的原理而已,所以实例相对简单。其实,Canvas中的动画可以很简单,也可以很复杂。不管简单还是复杂,其基本原理是完全相同的。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验