HTML5 Canvas ile farklı dönüşüm durumlarını kaydetmek ve geri yüklemek için canvas bağlamındaki save() ve restore() yöntemlerini kullanabiliriz.
Bu derste, durumu her dönüşümden hemen önce durum yığınına iterek dönüşüm durumunu kaydedeceğiz. Mavi bir dikdörtgen çizeceğiz, son dönüşüm durumunu geri yükleyip açacağız ve kırmızı bir dikdörtgen çizeceğiz, son dönüşüm durumunu geri yükleyip açacağınız ve sarı bir dikdörtgen çizeceğiz ve son olarak son dönüşüm durumunu geri yükleyip açacağız.
Çıktı:
Kod:
|
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 |
<canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var rectWidth = 150; var rectHeight = 75; context.save(); // save durum 1 context.translate(canvas.width / 2, canvas.height / 2); context.save(); // save durum 2 context.rotate(Math.PI / 4); context.save(); // save durum 3 context.scale(2, 2); context.fillStyle = 'blue'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.restore(); // restore durum 3 context.fillStyle = 'red'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.restore(); // restore durum 2 context.fillStyle = 'yellow'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.restore(); // restore durum 1 context.fillStyle = 'green'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> |
Yorum Yap