HTML5怎样绘制动画？（代码实例）【html5教程】

本篇文章给人人带来的内容是关于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视频教程，请关注ki4网。

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