canvas drawImage詳解

一、基礎概念

canvas drawImage方法是HTML 5標準中常用的Canvas API之一。它用於將圖像文件（包括點陣圖和矢量圖）和其他Canvas對象繪製到一個Canvas上。該方法既可以繪製完整的圖像，也可以只繪製圖像的一部分。使用該方法，可以實現圖像的縮放、裁剪、旋轉等效果。

二、函數語法

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

參數解析：

• image: 繪製到Canvas上的圖像文件或Canvas對象。
• sx: 繪製圖像時開始裁剪的X坐標位置。
• sy: 繪製圖像時開始裁剪的Y坐標位置。
• sWidth: 繪製圖像時裁剪的寬度。
• sHeight: 繪製圖像時裁剪的高度。
• dx: 繪製圖像時開始繪製的X坐標位置。
• dy: 繪製圖像時開始繪製的Y坐標位置。
• dWidth: 繪製出圖像時的寬度。（可選）
• dHeight: 繪製出圖像時的高度。（可選）

三、圖像文件的載入

在使用drawImage方法在Canvas上繪製圖片之前，必須先載入圖片文件。如下代碼所示：

var img = new Image();
img.src = "路徑/文件名.xxx";
img.onload = function(){
  //canvas drawImage方法繪製圖片
}

在路徑/文件名.xxx中，路徑表示圖片文件所在的路徑，文件名是指圖片文件的名稱（包括後綴），xxx則表示圖片文件的類型（如jpg、png等）。

四、簡單示例

下面的示例演示了如何將圖片文件繪製到Canvas上。示例中，我們先載入一個被繪製的圖像文件（即panda.jpg），然後繪製該圖像文件到Canvas上。

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0);
  };
  img.src="panda.jpg";
</script>

運行上述代碼，即可在Canvas上繪製出一張名為panda.jpg的圖片。

五、繪製部分圖片

有時，我們並不需要繪製完整的圖片，而是只需要繪製圖片的一部分。如下代碼所示：

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0, 50, 50, 0, 0, 100, 100);
  };
  img.src="panda.jpg";
</script>

在上述代碼中，我們繪製了panda.jpg圖像的左上角的50×50像素範圍內的圖片到Canvas上，然後將該部分圖片放大到100×100像素的範圍內。結果是，我們在Canvas上只看到了panda.jpg圖像的左上角部分，並且這部分圖像被放大了兩倍。

六、縮放圖片

我們可以通過修改Canvas上繪製圖像的寬度和高度，來縮放圖像。如下代碼所示：

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0, img.width/2, img.height/2);
  };
  img.src="panda.jpg";
</script>

在上述代碼中，我們將panda.jpg圖像的寬度和高度都縮小了一半，使用的方法是將原始寬度和高度除以2。

七、旋轉圖片

我們可以通過rotate方法旋轉Canvas上繪製的圖像。如下代碼所示：

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.rotate(20*Math.PI/180);
    ctx.drawImage(img, 0, 0, 100, 100);
  };
  img.src="panda.jpg";
</script>

在上述代碼中，我們將繪製的圖像旋轉了20度，然後再將該圖像繪製到了Canvas上。

八、實現圖像填充

我們可以使用drawImage方法實現Canvas中的圖像填充效果。如下代碼所示：

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    var pat=ctx.createPattern(img,"repeat");
    ctx.fillStyle=pat;
    ctx.fillRect(0,0,300,150);
  };
  img.src="panda.jpg";
</script>

在上述代碼中，我們使用drawImage方法創建一個圖像填充效果。具體地，我們首先創建一個Canvas的2D上下文，然後使用createPattern方法創建了一個由panda.jpg圖像組成的重複圖案，然後將這個圖案填充到Canvas上。