canvas strokeStyle

admin發表於2018-10-20
Canvas

此屬性可以設定或者返回描邊的樣式，可以類比CSS設定邊框的樣式。

很多程式碼演示僅介紹了顏色作為strokeStyle屬性的值。

其實此屬性功能比較強大，漸變物件或者模式物件也可以作為它的屬性值。

後面會通過程式碼例項詳細介紹。

預設strokeStyle屬性值為#000000。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.strokeStyle=color|gradient|pattern;

引數解析：

（1）.color：設定描邊的顏色，預設值為#000000。

（2）.gradient：將描邊設定為漸變，一個漸變物件。

（3）.pattern：將描邊設定為模式，一個模式物件。

瀏覽器相容：

（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.lineWidth=5;
  ctx.strokeRect(20,20,100,40);
}
</script>
</head>
<body>
<canvas id="ant">瀏覽器不支援canvas</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144011ohdzrufvnkcpphpw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果不顯示設定strokeStyles屬性，它的預設值為#000000。

所以矩形的描邊顏色為黑色。

[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="red";
  ctx.lineWidth=5;
  ctx.strokeRect(20,20,100,40);
}
</script>
</head>
<body>
<canvas id="ant">瀏覽器不支援canvas</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144033y9cczwzoe6zbbcyc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將矩形的描邊顏色設定為紅色。

[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");
  
  let gradient=ctx.createLinearGradient(0,0,170,0);
  gradient.addColorStop("0","magenta");
  gradient.addColorStop("0.5","blue");
  gradient.addColorStop("1.0","red");
  
  ctx.strokeStyle=gradient;
  ctx.lineWidth=5;
  ctx.strokeRect(20,20,100,40);
}
</script>
</head>
<body>
<canvas id="ant">瀏覽器不支援canvas</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144054heaspne4zk0843hs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將矩形的描邊設定為一個漸變物件。

可以看到，描邊漸變好像是填充漸變將中間鏤空。

不要想當然的認為，按照漸變是根據描邊是垂直還是水平進行。

[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");
  
  let gradient=ctx.createLinearGradient(0,0,170,0);
  let img=document.getElementById("lamp")
  let pat=ctx.createPattern(img,"repeat");
  
  ctx.strokeStyle=pat;
  ctx.lineWidth=20;
  ctx.strokeRect(20,20,100,40);
}
</script>
</head>
<body>
<canvas id="ant">瀏覽器不支援canvas</canvas>
<img src="demo/js/img/lamp.jpg" id="lamp">
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144115asjnjg967ha6u6c6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

表現效果好比是為描邊設定背景圖片。

strokeStyle屬性值是一個CanvasPattern物件。

關於此物件可以參閱canvas createPattern()一章節。

相關文章