Prev Demo
Sheartransform()
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Sheartransform</title> </head> <body> <canvas id="myCanvas" width="400" height="200" style="border:2px solid green"></canvas> <script> var a = document.getElementById('myCanvas'); var b = a.getContext('2d'); var rectWidth = 150; var rectHeight = 75; // shear matrix: // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0; // .75 horizontal shear var sy = 1; // no vertical shear b.transform(1, sx, sy, 1, 0, 0); b.fillStyle = 'orange'; b.fillRect(30, 50, 150, 75); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
