Canvas如何任意縮放圖片

在Canvas中，可以使用drawImage()方法來繪制圖片并進(jìn)行縮放。drawImage()方法有三個(gè)參數(shù)：繪制的圖片對象、繪制位置的x坐標(biāo)、繪制位置的y坐標(biāo)。同時(shí)，drawImage()方法還有兩個(gè)可選參數(shù)：繪制的圖片的寬度和高度。

通過調(diào)整繪制的圖片的寬度和高度，可以實(shí)現(xiàn)圖片的縮放效果。具體的步驟如下：

1. 獲取Canvas的上下文對象：var ctx = canvas.getContext('2d');

2. 創(chuàng)建一個(gè)Image對象并設(shè)置圖片的源：var img = new Image(); img.src = '圖片路徑';

3. 在圖片加載完成后，使用drawImage()方法繪制圖片到Canvas中：ctx.drawImage(img, x, y, width, height);

其中，x和y是繪制圖片的起始位置的坐標(biāo)，width和height分別是繪制圖片的寬度和高度。你可以修改這四個(gè)參數(shù)來調(diào)整圖片的位置和大小，從而實(shí)現(xiàn)縮放效果。

通過修改width和height的值，可以按比例縮放圖片。例如，將圖片的寬度和高度都乘以0.5可以將圖片縮小為原來的一半：

var width = img.width * 0.5;
var height = img.height * 0.5;
ctx.drawImage(img, x, y, width, height);

注意：在圖片加載完成之前就調(diào)用drawImage()方法可能會導(dǎo)致圖片無法顯示。為了確保圖片加載完成后再繪制到Canvas中，可以在img對象的onload事件中執(zhí)行繪制操作：

img.onload = function() {
  var width = img.width * 0.5;
  var height = img.height * 0.5;
  ctx.drawImage(img, x, y, width, height);
};