html的透明度属性,HTML5 - Canvas的使用样例6（设置透明度）

通常我们使用rgb()函数设置不透明的颜色，要实现半透明的颜色有两种方法。

1，使用rgba()函数

这种方法好适合使用多种颜色绘制，而且每个颜色需要单独设置不同的透明度的情况。

比如下面样例，底部的圆形使用实心颜色，上面的三角形使用半透明颜色填充，两种图形边框都使用实心颜色。

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

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

//设置填充及描边颜色

context.fillStyle = "rgb(100,150,185)";

context.lineWidth = 10;

context.strokeStyle = "red";

//绘制圆形

context.arc(110, 90, 80, 0, 2*Math.PI);

context.fill();

context.stroke();

//调用beginPath()绘制新形状

context.beginPath();

//用半透明的颜色填充三角形

context.fillStyle = "rgba(100,150,185,0.5)";

//绘制三角形

context.moveTo(215,50);

context.lineTo(25,190);

context.lineTo(315,190);

context.closePath();

context.fill();

context.stroke();

2，设置绘图上下文的globalAlpha属性

设置后，后续所有的绘图操作都会使用相同的透明度。

下面样例可以看到三角形的内部和边框都透明了。

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

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

//设置填充及描边颜色

context.fillStyle = "rgb(100,150,185)";

context.lineWidth = 10;

context.strokeStyle = "red";

//绘制圆形

context.arc(110, 90, 80, 0, 2*Math.PI);

context.fill();

context.stroke();

//调用beginPath()绘制新形状

context.beginPath();

//用半透明的三角形

context.globalAlpha = 0.5;

context.fillStyle = "rgba(100,150,185)";

//绘制三角形

context.moveTo(215,50);

context.lineTo(25,190);

context.lineTo(315,190);

context.closePath();

context.fill();

context.stroke();