HTML5填充顏色的fillStyle測試

阿新 • • 發佈：2019-01-19

程式碼：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> 
 4 <script type="text/javascript">
 5 function draw(){
 6 var ctx = document.getElementById('canvas').getContext('2d');
 7 for (var i=0;i<6;i++){ 
 8 for (var j=0;j<6;j++ 
){ 
 9 ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
10 ctx.fillRect(j*25,i*25,25,25);
11 }
12 }
13 }
14 </script>
15 <title>測試fillStyle - 何問起</title>
16  <meta name="description" content="何問起,hovertree.com" /><meta name="keywords" 
 content=" hovertree.com,何問起" />
17 
18 </head>
19 <body onload="draw();" > 
20 <canvas id="canvas" width="400" height="300">
21 </canvas>
22 <a href="http://hovertree.com/h/bjaf/a064shrh.htm">何問起</a>
23 </body>
24 </html>

如果我們想要給圖形上色，有兩個重要的屬性可以做到：fillStyle 和 strokeStyle。

fillStyle = color
strokeStyle = color

strokeStyle 是用於設定圖形輪廓的顏色，而 fillStyle 用於設定填充顏色。color 可以是表示 CSS 顏色值的字串，漸變物件或者圖案物件。預設情況下，線條和填充顏色都是黑色(CSS 顏色值 #000000)。

下面的例子都表示同一種顏色。
// 這些 fillStyle 的值均為 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

注意: 目前 Gecko 引擎並沒有提供對所有的 CSS 3 顏色值的支援。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。

注意: 一旦您設定了 strokeStyle 或者 fillStyle 的值，那麼這個新值就會成為新繪製的圖形的預設值。如果你要給每個圖形上不同的顏色，你需要重新設定 fillStyle 或 strokeStyle 的值。

http://hovertree.com/texiao/html5/canvas/3/

Canvas填充樣式fillStyle
說明
在本示例裡，我會再度用兩層for迴圈來繪製方格陣列，每個方格不同的顏色。結果如圖，但實現所用的程式碼卻沒那麼絢麗。我用了兩個變數i和j 為每一個方格產生唯一的RGB色彩值，其中僅修改紅色和綠色通道的值，而保持藍色通道的值不變。你可以通過修改這些顏色通道的值來產生各種各樣的色板。通過增加漸變的頻率，你還可以繪製出類似 Photoshop 裡面的那樣的調色盤。

HTML5填充顏色的fillStyle測試

HTML5填充顏色的fillStyle測試

Excel的單元格設置下拉選項並填充顏色

ps之填充顏色

洛谷 P1162 填充顏色（BFS）

TCS3200顏色感測器測試實驗:

dfs 填充顏色

百度echarts折線圖美化填充顏色，電波～，分類圓點圓點，填充

8.6-填充顏色

ListView:在Adapter中修改item裡的某個圖形的大小、填充顏色、邊距

繪製有填充和無填充顏色的長方形和圓形（C#）

html5中manifest特性測試（一）

HTML5繪製顏色漸變

對話方塊中繪製矩形區域並填充顏色

echarts兩折線間填充顏色

HTML5簡明教程-1.1.1.HTML5Canvas參考手冊之填充fillStyle

laraver框架學習------工廠模型填充測試數據

測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色

HTML5之placeholder屬性以及如何更改placeholder屬性中文字顏色

使用 Laravel 數據填充功能生成中文測試數據

qt 中畫線時如何設定筆的顏色和填充

HTML5填充顏色的fillStyle測試

相關推薦