Canvas的使用介绍(2）

上节我们介绍了怎么绘制图形，这次我们来学习怎样添加样式！

首先让我们首先修改上节的正方形

context.fillStyle="rgb(255,0,0)";
context.fillRect(40,40,100,100);

上段代码将绘制一个颜色为红色的正方形，通过设置2D渲染上下文的fillStyle属性，你就能够修改

形状和路径的填充颜色。在被例中，我们赋值了一个rgb(红，绿，蓝）颜色值。

context.fillStyle="rgb(255,0,0)";
context.fillRect(40,40,100,100);//红色正方形
context.fillRect(180,40,100,100);//红色正方形
context.fillStyle="rgb(0,0,0)";
context.fillRect(320,40,100,100);//黑色正方形

通过上述代码我们知道在你设置fillStyle属性之后，你所绘制的所有图形都会采用这个颜色，

如果你接受这个结果，它就不是问题。但是你只希望修改一个对象的颜色，那么你一定要注意。

还可以在描边图形和路径上使用strokeStyle属性实现路径变色效果。

context.strokeStyle="rgb(255,0,0)";
context.storkeRect(40,40,100,100);//红色正方形
context.strokeRect(180,40,100,100);//红色正方形

context.strokeStyle="rgb(0,0,0)";
context.strokeRect(320,40,100,100);//黑色正方形

修改线条也非常简单

context.lineWidth=5;//加粗线条
context.strokeStyle="rgb(255,0,0)";
context.beginPath();
context.moveTo(40,180);
cotext.lineTo(420,180);//红线
context.closePath();

context.lineWidth=20;//进一步加粗线条

context.storeStyle="rgb(0,0,0)";
context.beginPath();
context.moveTo(40,220);
context.lineTo(420,220);//黑线
context.closePath();
context.stroke();

如果不出意外的话应该会出现如下效果

绘制文本

var text="Hello,World";
context.font="italic 30px serif";//修改字体
context.fillText(text,40,40);

本章就学到这里吧，我将持续进行更新！