HTML5 Canvas dönüştürme matrisini sıfırlamak için, aşağıdaki kuralı kullanarak dönüşüm matrisini varsayılan durumuna getirmek için setTransform() yöntemini kullanabiliriz:
Çı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 | <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.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = 'blue'; context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight); // Reset Transform // 1 0 0 // 0 1 0 // 0 0 1 // transform uygunlanması context.setTransform(1, 0, 0, 1, 0, 0); context.fillStyle = 'red'; context.fillRect(0, 0, rectWidth, rectHeight); </script> |
Yorum Yap