liguofeng29’s blog

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

HTML5のcanvas要素 - イメージを描く

イメージ描くをメソッド

  1. void drawImage(Image image, float x, float y) : x,y位置にそのまま表示する
  2. void drawImage(Image image, float x, float y, float width, float height) : x,y位置に伸縮して表示する
  3. void drawImage(Image image, integer sx, integer sy, integer sw, integer sh, float dx, float dy, float dw, float dh) : イメージの一部を取得し、伸縮して表示する
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> イメージを描く </title>
</head>
<body>
<h2> イメージを描く </h2>
<canvas id="canvas" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
   // canvas要素取得
   var canvas = document.getElementById('canvas');
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext('2d');
   // Image生成
   var image = new Image();
   // Imageの位置
   image.src = "logo.jpg";
   
   // webリソースの場合、大容量イメージで読み込みに時間がかかる場合
   // イメージの読み込み後に表示するために、onloadイベントで描く
   image.onload = function()
   {
       // イメージを描く
       ctx.drawImage(image, 20, 10);
       
       // 一部のイメージを描く
       ctx.drawImage(image, 180, 10, 76, 110);
       
       var sd = 50;
       var sh = 65
       // 一部を取得し、3倍に拡大して表示する
       ctx.drawImage(image, 2, 50, sd,  sh 
           , 265, 10, sd * 3, sh * 3);
   }
</script>
</body>
</html>

f:id:liguofeng29:20160123234315p:plain