Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <title>CANVAS - skew X sa transform()</title> <script> var can, ctx; function init() { can = document.getElementById('kan1'); if (can.getContext) { ctx = can.getContext('2d'); //kvadrat na poziciji 0,0 drawRect('red'); //skew X var rad = Math.PI/4; //kut od 45° izrazen u radijanima var skewX = Math.tan(rad); ctx.transform(1,0,skewX,1,0,0); drawRect('green'); } else document.getElementById('kan11') .innerHTML='Vaš browser ne podržava CANVAS tag!'; } function drawRect(strokeColor) { ctx.strokeStyle = strokeColor; ctx.strokeRect(100,0, 100,100); } window.onload=init; </script> </head> <body> Zeleni kvadrat posmaknut za PI/4 45° u odnosu na crveni. <br> <br> <canvas id="kan1" width="300" height="300" style="border:1px solid #DDDDDD;"> <span id="kan11">Vaš browser ne podržava CANVAS element!</span> </canvas> <br><br> </body> </html>
Pregled stranice:
Pogledaj stranicu
../html/html5canvas/primjeri/50transform_skewx.html
.