實例

繪制矩形，放大到 200%，然后再次繪制矩形：

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

嘗試一下 ?

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 scale()

方法。

注意：Internet Explorer 8 及之前的版本不支持 元素。

定義和用法

scale() 方法縮放當前繪圖至更大或更小。

注意：如果您對繪圖進行縮放，所有之后的繪圖也會被縮放。定位也會被縮放。如果您 scale(2,2)，那么繪圖將定位于距離畫布左上角兩倍遠的位置。

JavaScript 語法：

context.scale(scalewidth,scaleheight);

參數值

參數

描述

scalewidth

縮放當前繪圖的寬度(1=100%，0.5=50%，2=200%，依次類推)。

scaleheight

縮放當前繪圖的高度(1=100%，0.5=50%，2=200%，依次類推)。

更多實例

實例

繪制一個矩形；放大到 200%，再次繪制矩形；放大到 200%，再次繪制矩形；放大到 200%，再次繪制矩形：

YourbrowserdoesnotsupporttheHTMLcanvastag.

JavaScript：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

嘗試一下 ?

總結

以上是生活随笔為你收集整理的html scale方法的作用,HTML Canvas scale() 方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。