转载至博客http://blog.csdn.net/u014607184/article/details/51746384 诗渊
<canvas></canvas>
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。
<canvas></canvas>
只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>
元素上绘图主要有三步:
<canvas>
元素对应的DOM对象,这是一个Canvas对象;以下是一个简单的<canvas>
绘图示例:
如果没有通过moveTo()特别指定,lineTo()的起始点是以上一个点为准。因此,如果需要重新选择起始点,则需要通过moveTo()方法。如果需要对不同的线段设置样式,则需要通过context.beginPath()重新开启一条路径,下面是一个示例:
这里需要说明两点:第一点就是stroke()和fill()绘制的前后顺序,如果fill()后面绘制,那么当stroke边框较大时,会明显的把stroke()绘制出的边框遮住一半;第二点:设置fillStyle或strokeStyle属性时,可以通过“rgba(255,0,0,0.2)”的设置方式来设置,这个设置的最后一个参数是透明度。
另外还有一个跟矩形绘制有关的:清除矩形区域:context.clearRect(x,y,width,height)。 接收参数分别为:清除矩形的起始位置以及矩形的宽和长。 在上面的代码中绘制图形的最后加上:
context.clearRect(100,60,600,100);
可以得到以下效果:
通过对五角星分析,我们可以确定各个顶点坐标的规律,这里需要注意的一点是:在canvas中,Y轴的方向是向下的。
相应代码如下:
最后效果:
本文分享自 javascript艺术 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!