liguofeng29’s blog

個人勉強用ブログだっす。

HTML5のcanvas要素 - 矩形陣変換

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 矩形陣変換 </title>
</head>
<body>
<h2> 矩形陣変換サンプル </h2>
<canvas id="canvas" width="600" height="360"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
   function skew(context,angle)
   {
       // transform 矩形陣変換
       context.transform(1,0,-Math.tan(angle),1,0,0);
   }
   // canvas要素取得
   var canvas = document.getElementById('canvas');
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext('2d');
   ctx.fillStyle = "rgba(255, 0,0,0.3)";  
   // 座標移動
   ctx.translate(360,5);  
   for(var i = 0 ; i < 30 ; i++)
   {
       // 座標移動
       ctx.translate(50,30);
       // 座標伸縮
       ctx.scale(0.93,0.93);
       // 矩形陣変換
       skew(ctx,Math.PI / 10);
       ctx.fillRect(0,0,150,75);  
   }
</script>
</body>
</html>

f:id:liguofeng29:20160124194022p:plain