canvas自定义画笔样式(颜色和纹理)

到现在为止,我们画出来的东西都是黑色的,这是因为canvas默认的绘图颜色就是黑色。当然我们也有其他的选择,可以自定义canvas中的线、面和文本样式,还可以使用不同的颜色、线型、透明度和填充纹理来绘图。

如果想为形状涂上颜色,需要使用以下两个重要的属性。

 

函数名 作用
fillStyle 设置接下来所有fill操作的默认颜色
strokeStyle 设置接下来所有stroke操作的默认颜色

 

这两个属性都可以接受有效的css颜色座位值,包括rgb()、rgba()以及颜色常量值。


我们创建了一个Html5 canvas标记

粘贴以下代码你可以看到如上效果

/**********************************自定义画笔样式(颜色和纹理)*******************************************/

//设置填充颜色为红色
context.fillStyle = 'red';
//画一个红色的实心矩形
context.fillRect(20,230,100,50);
			
//设置边线颜色为绿色
context.strokeStyle = 'green'
context.strokeRect(20,290,100,50);
			
//使用reg()设置填充颜色为红色
context.fillStyle = 'rgb(255,0,0)';
//画一个红色的实心矩形
context.fillRect(140,230,100,50);
//设置填充颜色为绿色且alpha值(透明度)为0.6
context.fillStyle = 'rgba(0,255,0,0.6)';
context.fillRect(190,255,100,50);