HTML5 tuvalini kesmek için, aşağıdaki dönüştürme matrisiyle transform()
yöntemini kullanabiliriz. sx
yatay kaymayı, sy
ise dikey kaymayı tanımlar.
Çı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 | <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; // bükme matris: // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0.75; // .75 dikey bükme var sy = 0; // yatay bükme yok // içeriği canvas merkezine göre çevirme context.translate(canvas.width / 2, canvas.height / 2); // transform uygulama context.transform(1, sy, sx, 1, 0, 0); context.fillStyle = 'blue'; context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight); </script> |
Yorum Yap