Điều không thể thiếu là chúng ta đặt thẻ Canvas vào trong body
<canvas id="myCanvas" width="578" height="200"></canvas>
Javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(canvas){
    var context = canvas.getContext("2d");
    var date = new Date();
    var time = date.getTime();
 
    // update
    var widthScale = Math.sin(time / 200) * 0.1 + 0.9;
    var heightScale = -1 * Math.sin(time / 200) * 0.1 + 0.9;
 
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // draw
    context.beginPath();
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.scale(widthScale, heightScale);
    context.arc(0, 0, 65, 0, 2 * Math.PI, false);
    context.restore();
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = "#555";
    context.stroke();
 
    context.beginPath();
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.scale(widthScale, heightScale);
    context.arc(-30, -30, 15, 0, 2 * Math.PI, false);
    context.restore();
    context.fillStyle = "white";
    context.fill();
 
    // request new frame
    requestAnimFrame(function(){
        animate(canvas);
    });
}
 
window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    animate(canvas);
};