canvas運用樣式與顏色——色彩

園藝 08-08

在canvas繪製圖形中介紹了fill和stroke方法用於填充和勾勒圖形。下面總結canvas全部樣式與顏色的可選項，用以繪製更吸引人的內容。

色彩

在前面介紹的canvas的相關知識中，只有用來繪製內容的方法。如果像要給繪製的內容上色，則要用到fillStyle和strokeStyle。語法如下：

fillStyle=color;

strokeStyle=color;

fillStyle用於設置填充的顏色，而strokeStyle用於設置圖像輪廓的顏色。color可以是表示css顏色值的字元串、漸變對象或者圖案對象。默認情況下，線條顏色和填充顏色都是黑色的。

fillStyle示例：

canvas運用樣式與顏色——色彩

function draw(){

var canvas=document.getElementById("test_fillStyle");

if(canvas.getContext){

var ctx=canvas.getContext("2d");

for(var i=0; i

for(var j=0; j

ctx.fillStyle="rgb("+Math.floor(255-42.5*i)+","+Math.floor(255-42.5*j)+",0)";

ctx.fillRect(25+j*25,25+i*25,25,25);

}

上面fillStyle的例子，用了雙層循環來繪製並填充了6*6的方格矩陣。根據變數i和j控制每個方格繪製的位置以及填充的顏色。

strokeStyle示例：

canvas運用樣式與顏色——色彩

function draw(){

var canvas=document.getElementById("test_strokeStyle");

if(canvas.getContext){

var ctx=canvas.getContext("2d");

for(var i=0; i

for(var j=0; j

ctx.strokeStyle="rgb(0,"+Math.floor(255-42.5*i)+","+Math.floor(255-42.5*j)+")";

ctx.beginPath();

ctx.arc(40+j*25,40+i*25,10,0,Math.PI*2,true);

ctx.stroke();

}

上面strokeStyle的例子，用了雙層循環來繪製並填充了6*6的圓圈矩陣。根據變數i和j控制每個圓圈繪製的位置以及描邊的顏色。

canvas運用樣式與顏色——色彩

請您繼續閱讀更多來自 H5與CSS3專究 的精彩文章:
TAG:H5與CSS3專究 |

您可能感興趣