canvas strokeRect()

admin發表於2018-10-17
Canvas

此方法可以繪製一個無填充的矩形圖案。

可以使用strokeStyle屬性設定描邊樣式，預設值是#000000。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.strokeRect(x,y,width,height);

引數解析：

（1）.x：必需，矩形左上角x軸座標。

（2）.y：必需，矩形左上角y軸座標。

（3）.width：必需，矩形的寬度。

（4）.height：必需，矩形的高度。

瀏覽器相容：

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

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

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

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

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

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

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.strokeRect(20,20,100,60);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/17/143121kzz7bye1iel81jek.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過strokeRect方法繪製一個寬度100px，高度60px的黑邊矩形。

特別說明：此矩形是無填充的，如果要繪製填充矩形可以使用fillRect方法。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.strokeStyle="blue";
  ctx.strokeRect(20,20,100,60);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/17/143159if9ilwfiwerhijrf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

使用strokeStyle屬性設定描邊的顏色。

相關文章