【canvas學習筆記五】使用圖片

時間 2020-07-03

標籤 canvas學習筆記五使用圖片简体版

原文原文鏈接

在canvas裏畫圖有兩個步驟：javascript

得到圖片源。
drawImage()畫圖。

圖片源

canvas支持如下幾種圖片資源：html

HTMLImageElement
可使用Image()方法構造的圖片，也能夠是HTML的元素。
HTMLVideoElement
可使用HTML的
HTMLCanvasElement
能夠將另外一個canvas做爲圖片資源。

得到圖片

如何得到頁面中的、 java

var img = new Image();   // Create new img element
img.src = 'myImage.png'; // Set source path

腳本開始執行之後，圖片就開始加載。
這裏須要注意的是，若是圖片還沒加載完成就用drawImage()方法繪製圖片的話，將什麼都畫不出來，若是是舊版瀏覽器，還會拋出錯誤。因此，繪圖的時候要確保圖片已經加載完成。算法

var img = new Image();   // Create new img element
img.addEventListener('load', function() {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

若是是隻要加載一張圖片的話，這個方法是不錯的。可是若是有不少圖片要加載的話，這個方法就很差了，須要使用到圖片預加載的技巧，這個技巧放在後面講。
咱們也可使用Base64編碼將圖片嵌在代碼裏。canvas

var img = new Image();   // Create new img element
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

繪製圖片

drawImage(image, x, y)瀏覽器

image是圖片引用，x, y是要繪製的圖片的左上角的座標。ide

最簡單的例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.beginPath();
    ctx.moveTo(30, 96);
    ctx.lineTo(70, 66);
    ctx.lineTo(103, 76);
    ctx.lineTo(170, 15);
    ctx.stroke();
  };
  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
}

結果

設置圖片大小

drawImage(image, x, y, width, height)編碼

drawImage方法也能夠指定圖片的寬度和高度，縮放圖片。code

例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    for (var i = 0; i < 4; i++) {
      for (var j = 0; j < 3; j++) {
        ctx.drawImage(img, j * 50, i * 38, 50, 38);
      }
    }
  };
  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
}

結果

裁剪

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)視頻

各參數的說明看下圖：

例子

<html>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
   <div style="display:none;">
     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
   </div>
 </body>
</html>

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  // Draw slice
  ctx.drawImage(document.getElementById('source'),
                33, 71, 104, 124, 21, 20, 87, 104);

  // Draw frame
  ctx.drawImage(document.getElementById('frame'), 0, 0);
}

在這個例子中，使用了標籤來做圖片源。
若是在CSS中將標籤設置爲隱藏，那麼輸出的結果圖片將不可見。