Canvas 3 着色

上色

• 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();