欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5下绘制动画代码教程

程序员文章站 2023-11-06 08:15:10
绘制动画 虽然canvas的api并未直接提供支持动画的方法,但就其本身而言,在canvas中实现动画效果也很简单:只需要持续的更新并重绘画布就行了。这种持续的更新并重绘就叫做动画循环,它是所有动画...

绘制动画

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

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

HTML5下绘制动画代码教程

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

接下来通过一个简单实例,来看看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 ()函数,来执行更新画布、清除画布、重绘画布的操作,以实现动画效果。

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