HTML5 Canvas içeriğini çevirmek için, translate() transform yöntemini kullanabiliriz. Çevirme, tuvalin bütün parçalarını tek bir yöntemle hareket ettirmemizi sağlar. Örneğin, tuval üzerine karmaşık bir çizim çizen bir işleve sahipsek ve çizimin etrafını hareket ettirmek için bir yola ihtiyacımız varsa, bağlamı çevirmek tüm noktaların x ve y konumunu ayarlamaktan daha kolaydır. çizimi yap.
Dönüşümler, önce tuval bağlamını dönüştürerek ve sonra üzerine çizerek çalışır. Bu derste, tuval içeriğini tercüme edeceğiz ve sonra (0,0) pozisyonuna bir dikdörtgen çizeceğiz. Bağlam çevrildiğinden beri, dikdörtgen de çevrilecektir.
Çıktı:
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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; // canvası döndürme context.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = 'blue'; context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); </script> |
Yorum Yap