html5基础入门教程之canvas运用样式与颜色，前端开发大型网站

ctx.fillStyle=‘blue’;

ctx.fillRect(50,50,75,50);

ctx.fillStyle=‘green’;

ctx.fillRect(80,80,75,50);

}

}

上面这个例子，红色的矩形是完全不透明的，因为在它之前并没有设置透明度。在红色矩形绘制完成后，设置了都明度为0.2，从而之后绘制的蓝色矩形和绿色矩形的透明度都受影响了。

2.rgba

由于strokeStyle和fillStyle都接受符合css3规范的颜色值，所以还可以使用另一种设置透明度的方法，那就是rgba()方法，它的灵活性更大。

rgba()示例：

function draw(){

var canvas=document.getElementById(‘test_rgba’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

//绘制四个宽高为150*37.5的矩形，颜色分别为：黄、绿、蓝、红

ctx.fillStyle=‘rgb(255,221,0)’;

ctx.fillRect(10,0,150,37.5);

ctx.fillStyle=‘rgb(102,204,0)’;

ctx.fillRect(10,37.5,150,37.5);

ctx.fillStyle=‘rgb(0,153,255)’;

ctx.fillRect(10,75,150,37.5);

ctx.fillStyle=‘rgb(255,51,0)’;

ctx.fillRect(10,112.5,150,37.5);

//绘制上面大矩形内部的白色小矩形

for(var i=0;i<10;i++){

ctx.fillStyle=‘rgba(255,255,255,’+(i+1)/10+‘)’;

for(var j=0;j<4;j++){

ctx.fillRect(15+i14,5+j37.5,14,27.5);

}

}

}

}

上面的例子，先竖向绘制了四个大小一致、颜色分别为黄、绿、蓝、红的背景矩形。然后根据变量i和j在四个矩形内部分别以一定步长来绘制背景色为白色透明度不一的白色小矩形。

线型

canvas可以通过一定属性来设置线的样式。

lineWidth = value

lineCap = type

lineJoin = type

miterLimit = value

1.lineWidth属性

lineWidth用于设置当前绘制的线的粗细。属性值必须为正数。默认值为1.0。

注意，这里的线宽是指给定路径的中心到两边的粗细。换句话说就是：在路径的两边各绘制线宽的一半。

来看一个例子：

function draw(){

var canvas=document.getElementById(‘test_lineWidth1’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

ctx.lineWidth=10;