HTML5 Canvas’ı döndürmek için rotate() transform yöntemini kullanabiliriz. Döndürme dönüşümü radyan cinsinden bir açı gerektirir. Dönme noktasını tanımlamak için, önce tuval bağlamını, bağlamın sol üst köşesinin istenen dönüş noktasında olacak şekilde çevirmemiz gerekir. Bu derste, tuval içeriğini, içeriğin sol üst köşesinin doğrudan dikdörtgenin ortasına gelecek şekilde çevirdik; bu, dikdörtgenin merkezi etrafında bir dönüş oluşturur.
Çıktı:
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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; // çevirme noktası ayarlama context.translate(canvas.width / 2, canvas.height / 2); // saat yönünde 45derece döndür context.rotate(Math.PI / 4); context.fillStyle = 'blue'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> |
Yorum Yap