liguofeng29’s blog

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

HTML5のcanvas要素 - 出力

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> canvas出力 </title>
</head>
<body>
<h2> canvas出力サンプル </h2>
<canvas id="canvas" width="420" height="320"
    style="border:1px solid black"></canvas>
    <h2>出力結果</h2>
<img id="result"></img>
<script type="text/javascript">
   // canvas要素取得
   var canvas = document.getElementById("canvas");
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext("2d");
   
   ctx.fillStyle = "rgba(255, 0, 0, 0.3)";  
   // 座標移動
   ctx.translate(30, 200);  
   for(var i = 0 ; i < 50 ; i++)
   {  
       ctx.translate(50, 50);  // 座標移動
       ctx.scale(0.93, 0.93);  // 座標伸縮
       ctx.rotate(-Math.PI / 10);  // 座標回転
       ctx.fillRect(0, 0, 150, 75);  
   } 
   // 出力
   document.getElementById("result").src = canvas.toDataURL("image/png");
</script>
</body>
</html>

f:id:liguofeng29:20160124233415p:plain