canvas scale()

admin發表於2019-08-24
Canvas

此方法可以對當前繪圖進行縮小或者放大操作。

但是需要注意的是，此方法的實質是對畫布座標系的縮放。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.scale(scalewidth,scaleheight);

引數解析：

（1）.scalewidth：規定座標系x軸方位縮放的比率。

（2）.scaleheight：規定座標系y軸方位縮放的比率。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（2）.谷歌瀏覽器支援此方法。

（3）.火狐瀏覽器支援此方法。

（4）.Opera瀏覽器支援此方法。

（5）.Safari瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid black;
}  
</style>
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
  
  ctx.strokeRect(5,5,25,15);
  ctx.scale(4,4);
  ctx.strokeRect(5,5,25,15);
}
</script> 
</head>
<body>
<canvas id="ant">瀏覽器不支援此標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/24/141416agbk280e8vpz8kkr.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼簡單分析如下：

（1）.ctx.strokeRect(5,5,25,15)，座標系縮放前繪製一個矩形。

（2）.ctx.scale(4,4)，對座標系整體放大四倍。

（4）.ctx.strokeRect(5,5,25,15)，因為座標系放大四倍，所以視覺尺寸是原來的四倍。

相關文章