上色
-
fillStyle:設定圖形填充色
- fillStyle = color
-
strokeStyle:設定圖形邊框顏色
- strokeStyle = color
-
color:可以是 css 顏色的字符串,也可以是漸變對象或者是圖案對象
-
canvas 默認顏色是黑色
-
每次改變顏色都需要重新設定,因爲之前的設定都會成爲默認值。
CSS 顏色標準包括
- “orange” 顏色字串
- “#FFA500” hex color 16進制顏色
- “rgb(255,165,0)” rgb 3原色
- “rgba(255,165,0,1)” rgba 三原色+透明度
範例1:
<canvas id="canvas" width="150" height="150"></canvas>
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<225;i++){
//設定顏色
ctx.fillStyle = 'rgb(' + Math.floor(255-i) + ',' +
Math.floor(255-42.5) + ',0)';
//繪製矩形
ctx.fillRect(1,i*1,50,1);
}
}
draw();
透明度設定
- 設定全局顏色透明度
- globalAlpha = transparencyValue
- 這個屬性會影響全局圖形透明度
- 在繪製大量相同透明度的圖形時非常高效
- 設定每一次上色的透明度
- ctx.fillStyle = “rgba(255,0,0,0.5)”
範例2:
//改變全局的透明度
function draw1() {
var ctx = document.getElementById('canvas').getContext('2d');
// 设置透明度值
ctx.globalAlpha = 0.2;
// 画半透明圆,圖像是一直疊加的,所以共同的區域最黑
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}
//每次繪製前設定透明度
function draw2() {
var ctx = document.getElementById('canvas').getContext('2d');
// 设置透明度值
/* ctx.globalAlpha = 0.2; */
// 画半透明圆
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.fillStyle = 'rgba(0,0,0,0.2)'
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}
draw1();