上节我们介绍了怎么绘制图形,这次我们来学习怎样添加样式!
首先让我们首先修改上节的正方形
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);
本章就学到这里吧,我将持续进行更新!