| 若是咱們想要給圖形上色，有兩個重要的屬性能夠作到：fillStyle 和 strokeStyle。
fillStyle = color
strokeStyle = colorjavascript strokeStyle 是用於設置圖形輪廓的顏色，而 fillStyle 用於設置填充顏色。color 能夠是表示 CSS 顏色值的字符串，漸變對象或者圖案對象。默認狀況下，線條和填充顏色都是黑色(CSS 顏色值 #000000)。html 下面的例子都表示同一種顏色。
// 這些 fillStyle 的值均爲 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)"; java 注意: 目前 Gecko 引擎並無提供對全部的 CSS 3 顏色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。canvas 注意: 一旦您設置了 strokeStyle 或者 fillStyle 的值，那麼這個新值就會成爲新繪製的圖形的默認值。若是你要給每一個圖形上不一樣的顏色，你須要從新設置 fillStyle 或 strokeStyle 的值。
函數 |
|
| Canvas填充樣式fillStyle
說明
在本示例裏，我會再度用兩層for循環來繪製方格陣列，每一個方格不一樣的顏色。結果如圖，但實現所用的代碼卻沒那麼絢麗。我用了兩個變量i和j 爲每個方格產生惟一的RGB色彩值，其中僅修改紅色和綠色通道的值，而保持藍色通道的值不變。你能夠經過修改這些顏色通道的值來產生各類各樣的色板。通 過增長漸變的頻率，你還能夠繪製出相似 Photoshop 裏面的那樣的調色板。
代碼:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<script type="text/javascript">
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
</script>
<title>測試fillStyle</title>
</head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
post 效果
Canvas strokeStyle 案例
說明
這個示例與上面的有點相似，但此次用到的是 strokeStyle 屬性，並且畫的不是方格，而是用 arc 方法來畫圓。
代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
</script>
<title>測試strokeStyle</title>
</head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
====================================================
效果
透明度 Transparency
除了能夠繪製實色圖形，咱們還能夠用 canvas 來繪製半透明的圖形。經過設置 globalAlpha 屬性或者使用一個半透明顏色做爲輪廓或填充的樣式。
globalAlpha = transparency value
globalAlpha屬性在須要繪製大量擁有相同透明度的圖形時候至關高效。不過，我認爲下面的方法可操做性更強一點。
由於strokeStyle和fillStyle 屬性接受符合CSS3 規範的顏色值，那咱們能夠用下面的寫法來設置具備透明度的顏色。
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
rgba() 方法與 rgb() 方法相似，就多了一個用於設置色彩透明度的參數。它的有效範圍是從 0.0（徹底透明）到 1.0（徹底不透明）。測試 Canvas透明度globalAlpha
說明
在這個例子裏，我用四色格做爲背景，設置globalAlpha 爲 0.2後，在上面畫一系列半徑遞增的半透明圓。最終結果是一個徑向漸變效果。圓疊加得越更多，原先所畫的圓的透明度會越低。經過增長循環次數，畫更多的 圓，背景圖的中心部分會徹底消失。
代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// draw background
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,150,150);
ctx.fillStyle = '#FFF';
ctx.globalAlpha = 0.2;
// Draw semi transparent circles
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}
</script>
<title>測試strokeStyle</title>
</head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
====================================================ui 效果：
google 簡化做圖步驟，重寫做圖函數(畫一個三角形)：spa function DrawTriangle(Canvas,A,B,C) { //畫個三角形,「A、B、C」是頂點 with (Canvas) { moveTo(A[0],A[1]); lineTo(B[0],B[1]); lineTo(C[0],C[1]); lineTo(A[0],A[1]); } } 把這個函數寫進「bigengineer.js」中。 下面是更多的實例，這些例子都頗有表明性，一通百通： 四、畫個三角形： <html><head> <title>Google搜索：HTML 5 金海龍</title> <script type="text/javascript" src="bigengineer.js"></script> </head> <body><canvas id="cc" width="800" height="200"></canvas> <script type="text/javascript"> var c=document.getElementById("cc"); var hb=c.getContext("2d"); hb.beginPath(); var A=new Array(10,10); var B=new Array(50,40); var C=new Array(80,80); DrawTriangle(hb,A,B,C); hb.stroke(); hb.endPath(); </script> </body> </html> 本身畫的三角形 ///////
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="bigengineer.js"></script>
</head>
<body>
<canvas id="cc" width="800" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("cc");
var hb=c.getContext("2d");
hb.beginPath();
var A=new Array(10,10);
var B=new Array(40,10);
var C=new Array(70,70);
hb.closePath();
hb.strokeStyle="red";
hb.fillStyle="red";
DrawTriangle(hb,A,B,C);
hb.stroke();
hb.fill();
hb.endPath();
</script>
</body>
</html>
</html>
/////////js
/**
* Created by 冰淵 on 2016/1/17.
*/
function DrawTriangle(Canvas,A,B,C)
{
//畫個三角形,「A、B、C」是頂點
with (Canvas)
{
moveTo(A[0],A[1]);
lineTo(B[0],B[1]);
lineTo(C[0],C[1]);
lineTo(A[0],A[1]); }}摘自博客 |