Ứng dụng kết hợp scale(), save() và restore() để vẽ hình oval. Các bạn có thắc mắc tại sao phải dùng store() trong trường hợp này không? Nếu có bạn hãy thử viết và test lại bài này nhé.

HTML5 Canvas: vẽ hình Oval

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.save(); // save state
    var centerX = 0;
    var centerY = 0;
    var radius = 50;
 
    context.translate(canvas.width / 2, canvas.height / 2);
    context.scale(2, 1);
 
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
    context.restore(); // Trả về trạng thái ban đầu để vẽ viền
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();
};

Trong ví dụ trên, vì khi hình bị scale chúng ta stroke cũng sẽ bị scale theo, nên khi restore viền sẽ đẹp như hình minh họa