canvas之添加颜色样式、绘制文本、使用图片

一、使用颜色和样式

（一）色彩color

给图形上色，有两个重要的属性可以用到：fillStyle 和 strokeStyle。

fillStyle = color   设置图形的填充颜色。

strokeStyle = color 设置图形轮廓的颜色。

注意：一旦设置了fillStyle 或 strokeStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，需要重新设置fillStyle 或strokeStyle的值。

• fillStyle示例
• strokeStyle示例

（二）透明度transparency

通过设置 globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。

globalAlpha = transparencyValue

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

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

 

//  指定透明颜色，用于描边和填充样式

ctx.strokeStyle= "rgba(255,0,0,0.5)";

ctx.fillStyle= "rgba(255,0,0,0.5)";

rgba（）和rgb（）方法类似，最后一位参数代表透明度。

• globalAlpha示例
• rgba()示例