Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS - skew XY 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 XY
  var radX = Math.PI/4; //kut od 45° izrazen u radijanima
  var skewX = Math.tan(radX);
  var radY = Math.PI/6; //30°
  var skewY = Math.tan(radY);
  ctx.transform(1,skewX,skewY,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 u smjeru x i za PI/6 u smjeru y 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>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/50transform_skewxy.html.