填充属性和描边属性决定如何来绘制图形

当前位置: 澳门新葡亰1495app > Web前端 >

任凭你在HTML5 canvas上制图什么图形,有多少个性情是您不得不设置的:

描边属性-stroke

填充属性和描边属性决定哪些来绘制图形。stroke是图表的外籍轮船廓边框。fill则是图形的填写颜色。

上面是叁个粗略的例子,在Canvas中绘制了二个栗褐边框和紫罗兰色填充的矩形:

您的浏览器不帮忙HTML5 Canvas!

下面例子的落到实处代码如下:

//1.等待页面DOM元素加载完毕window.onload=function;}functiondrawExamples(){//2.获取canvas元素的引用varcanvas=document.getElementById;//3.从canvas元素中获取一个2Dcontextvarcontext=canvas.getContext;//4.绘制图形context.fillStyle="#009900";context.fillRect;context.strokeStyle="#0000ff";context.lineWidth=5;context.strokeRect;}

留意上边包车型地铁填写样式和描边样式是独家设置的。分别是利用2D上下文的strokeStylefillStyle属性。

描边的宽度使用的是lineWidth属性,lineWidth安装为5代表矩形的外市框的线条宽度为5个单位。

制图矩形

在HTML5 canvas中,可以绘制的最轻松易行的图形莫过于绘制叁个矩形。在上头的例证中大家就绘制了八个矩形。它们分别是透过2D上下文的fillRect()方法和strokeRect()措施来完结的。

varcanvas=document.getElementById;varcontext=canvas.getContext;context.fillStyle="#ff0000";context.fillRect;context.strokeStyle="#0000ff";context.strokeRect;

您的浏览器不帮助HTML5 Canvas!

fillRect方法用于绘制贰个填写颜色的矩形。它由xy品质决定矩形的左上角地方,widthheight兑现调节矩形的升幅和中度。

请记住,canvas的坐标体系由canvas的左上角坐标开端,然后X轴向右为正在方向,Y轴向下为正值方向。它的Y轴和寻常的几何坐标体系是倒转的。

xywidthheight4个变量作为参数传入fillRect()中,用以鲜明哪些绘制这一个矩形。下边是贰个事例:

varx=10;vary=10;varwidth=100;varheight=100;context.fillRect;

上面是上边的代码所绘制的矩形:

您的浏览器不辅助HTML5 Canvas!

上边的矩形是浅湖蓝的,是因为我们未有设置2D上下文的fillStyle天性,它默许的颜料就是月光蓝的。

strokeRect()

strokeRect()措施用于绘制八个描边矩形,未有填充色。相仿,它由xy本性决定矩形的左上角地点,widthheight落实调节矩形的肥瘦和惊人。熄灭是三个例子:

varx=10;vary=10;varwidth=100;varheight=100;context.strokeRect;

上面代码的归来结果如下:

您的浏览器不支持HTML5 Canvas!

一致,在大家未有安装2D上下文的strokeStyle性格的情事下,描边色是黑古铜色的。

您能够运用2D上下文的lineWidth质量来安装描边的宽窄。比方上边包车型的士事例:

varx=10;vary=10;varwidth=100;varheight=100;context.lineWidth=4;context.strokeRect;

地方的代码的归来结果如下:

你的浏览器不帮忙HTML5 Canvas!

矩形的水彩

您能够应用2D上下文的fillStylestrokeStyle来安装绘制矩形的颜色。例如下边包车型大巴例证:

varcanvas=document.getElementById;varcontext=canvas.getContext;context.fillStyle="#f2784b";context.fillRect;context.lineWidth=4;context.strokeStyle="#049372";context.strokeRect;

地方的代码的回来结果如下:

您的浏览器不辅助HTML5 Canvas!

clearRect()

2D上下文的clearRect()函数用于在Canvas中消灭一个矩形区域。被驱除的矩形区域成为透明。下边是二个例证:

varcanvas=document.getElementById;varcontext=canvas.getContext;context.fillStyle="#ff0000";context.fillRect;context.strokeStyle="#0000ff";context.strokeRect;context.clearRect;

地点代码的而回到结果如下:

你的浏览器不帮忙HTML5 Canvas!

在意阅览地点的图片,金棕和深湖蓝矩形分别被消亡掉一部分。因为clearRect()会使矩形区域变得透明,而canvas元素坐落于别的成分的下边,所以通过透明区域能够看见这一个canvas成分。

clearRect()和矩形相通也足以流传4个参数:clearRect。那4个参数的意义和矩形的描述是相通的。

澳门新葡亰1495app,回来HTML5 Canvas教程目录 相关阅读

MDN Drawing shapes with canvas

MDN Applying styles and colors

上一篇:在文本框获得焦点时选择其所有文本 下一篇:没有了