canvas fillStyle

admin發表於2018-10-15
Canvas

屬性名稱fillStyle是一個合成詞，由單詞fill和style構成。

fill具有填充的意思，style具有方式的意思。

那麼可以猜測，此屬性的功能作用與圖案的填充方式，事實也的確如此。

fillStyle屬性可以設定或者返回canvas圖案的填充方式。

預設值是#000000，屬性值可以有如下三種型別：

（1）.顏色。

（2）.漸變。

（3）.模式。

在文章後面會通過例項演示一下屬性值三種型別的使用。

更多關於canvas內容可以參閱canvas API一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.fillStyle=color|gradient|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.fillStyle="red";
  ctx.fillRect(10,20,150,60);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/210526s7jhmrnlvf9ausu7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

fillStyle屬性值為"red"，當然也可以其他顏色型別，CSS可用的顏色型別，canvas中都是可用的。

關於這些顏色型別可以參閱CSS顏色值型別一章節。

演示一段使用RGBA顏色型別的例項：

[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.fillStyle="RGBA(255,0,0,0.5)";
  ctx.fillRect(10,20,150,60);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/210621d1gz9mg21atfa05f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

fillStyle屬性值設定為RGBA顏色值。

[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,0,170);
  gradient.addColorStop(0,"red");
  gradient.addColorStop(1,"blue");
  ctx.fillStyle=gradient;
  ctx.fillRect(10,20,150,60);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/210645yy50eeynelivtay3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼中，fillStyle屬性值並不是普通的顏色值，而是一個線性漸變物件。

關於線性漸變可以參閱canvas createLinearGradient()一章節。

[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 img=document.getElementById("lamp")
  let pat=ctx.createPattern(img,"repeat");
  ctx.fillStyle=pat;
  ctx.fillRect(10,20,150,60);
}
</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/15/210716tsp7l5ocltcu9dqq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

fillStyle屬性值是一個CanvasPattern物件。

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

相關文章