HTML5圖像旋轉縮放代碼 HTML5是一種新的前端技術，它可以為我們帶來更多豐富的交互效果。圖像旋轉縮放是一個常見的需求，在HTML5中，我們可以使用canvas元素來實現這個效果。 首先，我們需要在HTML文檔中加入canvas元素，如下所示： `````` 其中，id屬性用于指定canvas的唯一ID，width和height屬性用于指定canvas的寬度和高度。 接下來，我們可以使用JavaScript來獲取canvas元素，并在其中繪制圖形。下面是一個旋轉和縮放圖像的示例代碼： ```

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "image.jpg";
img.onload = function() {
// 旋轉圖像
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(45*Math.PI/180);
// 縮放圖像
ctx.scale(0.5, 0.5);
// 繪制圖像
ctx.drawImage(img, -img.width/2, -img.height/2);
}

``` 在上面的代碼中，首先我們使用document.getElementById方法獲取了canvas對象，然后使用getContext方法獲取了繪圖上下文。接著，我們創建了一個Image對象，并將它的src屬性設置為圖像的路徑。 在圖像加載完成后，我們調用了onload方法，這個方法會在圖像加載完成后被執行。在其中，我們使用translate方法將原點移動到canvas中心，然后使用rotate方法將圖像旋轉45度。最后，我們使用scale方法將圖像縮放到原來的50%，最后使用drawImage方法將圖像繪制到canvas上。 綜上所述，HTML5提供了豐富的繪圖功能，使得我們可以靈活地實現圖像旋轉縮放等效果。