使用 rgba

因为 strokeStyle 和 fillStyle 属性接受符合 CSS 3 规范的颜色值，那就可以用下面的写法来设置具有透明度的颜色。

  1. // 指定透明颜色，用于描边和填充样式
  2. ctx.strokeStyle = "rgba(255,0,0,0.5)";
  3. ctx.fillStyle = "rgba(255,0,0,0.5)";

globalAlpha

作用

这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

  1. const ctx = document.getElementById('canvas').getContext('2d');
  2. // 画背景
  3. ctx.fillStyle = '#FD0';
  4. ctx.fillRect(0,0,75,75);
  5. ctx.fillStyle = '#6C0';
  6. ctx.fillRect(75,0,75,75);
  7. ctx.fillStyle = '#09F';
  8. ctx.fillRect(0,75,75,75);
  9. ctx.fillStyle = '#F30';
  10. ctx.fillRect(75,75,75,75);
  11. ctx.fillStyle = '#FFF';
  13. // 设置透明度值
  14. ctx.globalAlpha = 0.2;
  16. // 画半透明圆
  17. for (let i=0;i<7;i++){
  18.   ctx.beginPath();
  19.   ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
  20.   ctx.fill();
  21. }