HTML5簡明教程-1.1.1.HTML5Canvas參考手冊 之 填充fillStyle
阿新 • • 發佈：2019-02-10
之前寫過一篇關於HTML5canvas的博文，泛泛介紹了canvas的相關功能。今早翻看w3cschool才發現，canvas相關知識還有很多。在接下來的先關文章中會對canvas做進一步學習與總結，做一個備查手冊。
屬性名：fillStyle
屬性描述：fillStyle 屬性設定或返回用於填充繪畫的顏色、漸變或模式。
屬性預設值：#000000
屬性值：color|gradient|pattern
屬性值詳解：
（1）color。與普通樣式的顏色定義相同，可以用類似於red、green等英文單詞，可以用#000000這樣的顏色值，也可以用rgba()定義顏色或透明度。如下程式碼：
//單色填充 cC.fillStyle = 'red'; cC.fillRect(0, 0, 200, 200); //rgba填充 cC.fillStyle = 'rgba(0,0,255,0.5)'; cC.fillRect(210, 0, 200, 200);
（2）gradient。gradient指又createLinearGradient()或createRadialGradient()建立的物件，分別實現線性漸變和放射漸變。方法在此不做詳細介紹，以後會專門總結。程式碼如下：
//線性漸變填充 //獲得漸變範圍，引數：（起點X軸座標，起點Y軸座標，終點X軸座標，終點Y軸座標） var lg = cC.createLinearGradient(0, 210, 200, 200); lg.addColorStop(0, 'green'); lg.addColorStop(0.5, 'red'); lg.addColorStop(1, 'yellow'); cC.fillStyle = lg; cC.fillRect(0, 210, 200, 200); //放射漸變填充 //獲得漸變範圍，引數：（漸變的開始圓的 x 座標，漸變的開始圓的 y 座標，開始圓的半徑，漸變的結束圓的 x 座標，漸變的結束圓的 y 座標，結束圓的半徑） var rg = cC.createRadialGradient(370, 370, 50, 370, 370, 170); rg.addColorStop(0, 'red'); rg.addColorStop(0.5, 'green'); rg.addColorStop(1, 'yellow'); cC.fillStyle = rg; cC.fillRect(210, 210, 200, 200);
（3）pattern。pattern指由createPattern()方法建立的物件，該物件與ps中的物件填充相似，都是用已有物件內容填充相關區域。此處我們用img建立填充物件，仍會存在瀏覽器相容性問題，所以在影象載入完成後才進行繪製，以解決相容性問題。程式碼如下：
fillStyle的基本內容也就這些，下面是我測試用到的程式碼：//pattern物件填充 //用圖片做填充時仍會存在瀏覽器相容性的問題，需要在圖片載入完成後進行繪製，否則將無法繪製 var img = document.getElementById('img'); img.onload = function() { //createPattern()方法的第二個引數定義了第一個物件的重複方式，與背景圖片的重複方式一致，有如下方式： //repeat：x軸與y軸都重複 //repeat-x：僅重複x軸 //repeat-y：僅重複y軸 //no-repeat：不重複，僅顯示一次 var p = cC.createPattern(img, 'repeat'); cC.fillStyle = p; cC.fillRect(0, 400, 400, 400); cC.fill(); };
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 Canvas</title>
</head>
<body>
<canvas id="can" width="400" height="800"></canvas>
原圖：
<img src="resources/images/1.jpg" alt="" id="img">
</body>
<script type="text/javascript">
//獲得頁面元素
var c = document.getElementById('can');
//呼叫html5相關方法獲得2D物件
var cC = c.getContext('2d');
//單色填充
cC.fillStyle = 'red';
cC.fillRect(0, 0, 200, 200);
//rgba填充
cC.fillStyle = 'rgba(0,0,255,0.5)';
cC.fillRect(210, 0, 200, 200);
//線性漸變填充
//獲得漸變範圍，引數：（起點X軸座標，起點Y軸座標，終點X軸座標，終點Y軸座標）
var lg = cC.createLinearGradient(0, 210, 200, 200);
lg.addColorStop(0, 'green');
lg.addColorStop(0.5, 'red');
lg.addColorStop(1, 'yellow');
cC.fillStyle = lg;
cC.fillRect(0, 210, 200, 200);
//放射漸變填充
//獲得漸變範圍，引數：（漸變的開始圓的 x 座標，漸變的開始圓的 y 座標，開始圓的半徑，漸變的結束圓的 x 座標，漸變的結束圓的 y 座標，結束圓的半徑）
var rg = cC.createRadialGradient(370, 370, 50, 370, 370, 170);
rg.addColorStop(0, 'red');
rg.addColorStop(0.5, 'green');
rg.addColorStop(1, 'yellow');
cC.fillStyle = rg;
cC.fillRect(210, 210, 200, 200);
//pattern物件填充
//用圖片做填充時仍會存在瀏覽器相容性的問題，需要在圖片載入完成後進行繪製，否則將無法繪製
var img = document.getElementById('img');
img.onload = function() {
//createPattern()方法的第二個引數定義了第一個物件的重複方式，與背景圖片的重複方式一致，有如下方式：
//repeat：x軸與y軸都重複
//repeat-x：僅重複x軸
//repeat-y：僅重複y軸
//no-repeat：不重複，僅顯示一次
var p = cC.createPattern(img, 'repeat');
cC.fillStyle = p;
cC.fillRect(0, 400, 400, 400);
cC.fill();
};
</script>
</html>
轉載請註明出處