HTML5怎样绘制动画？（代码实例）-

绘制动画虽然canvas的API并未直接供给支撑动画的办法，但就其自身而言，在canvas中实现动画结果也很简略：只需要延续的更新并重绘画布就行了。这种延续的更新并重绘就叫做动画轮回，它是所有动画的中心逻辑。在canvas中实现动画，第一需要初始化画布上的对象。然后，启动一个动画轮回来更新画布、革除画布、重绘画布，再要求下一个新的动画帧。Canvas动画的根本道理如图4?36所示：图4-36... 本篇文章给大家带来的内容是对于HTML5怎样绘制动画？（代码实例） ，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

虽然canvas的API并未直接供给支撑动画的办法，但就其自身而言，在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 ()函数，来施行更新画布、革除画布、重绘画布的操纵，以实现动画结果。运转效果如图 4?37 所示：

固然，这里只是为了演示实现动画的道理罢了，所以实例相对简略。其实，Canvas中的动画可以很简略，也可以很复杂。无论简略还是复杂，其根本道理是完全雷同的。

以上就是对HTML5怎样绘制动画？（代码实例） 的全部介绍，要是您想理解更多有关Html5视频教程，请关注百分百源码网。

以上就是HTML5怎样绘制动画？（代码实例）的细致内容，更多请关注 百分百源码网 其它相干文章！