How to draw animation in HTML5? (code example)

The content of this article is about how to draw animation in HTML5? (Code example) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Although the canvas API does not directly provide methods to support animation, in itself, it is very simple to implement animation effects in canvas: you only need to continuously update and redraw the canvas. This continuous updating and redrawing is called the animation loop, which is the core logic of all animations.

To implement animation in canvas, you first need to initialize the objects on the canvas. Then, start an animation loop that updates the canvas, clears the canvas, redraws the canvas, and then requests the next new animation frame.

Next, let’s take a look at the implementation process of canvas animation through a simple example. This example implements a rotating Bagua chart in an animated way. The code is as follows:

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);
};

The above code, when the page is loaded, is first initialized, and then calls the setInterval(drawStage, 100) method to start the animation cycle. In the animation cycle, drawStage () will be called every 100ms. Function to perform the operations of updating the canvas, clearing the canvas, and redrawing the canvas to achieve animation effects. The running result is shown in Figure 4-37:

Of course, this is just to demonstrate the principle of animation, so the example is relatively simple. In fact, animation in Canvas can be very simple or very complex. Whether simple or complex, the basic principles are exactly the same.

The above is how to draw animation in HTML5? (Code examples) Full introduction, if you want to know more about Html5 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to draw animation in HTML5? (code example). For more information, please follow other related articles on the PHP Chinese website!