来源:http://blog.csdn.net/liuyan19891230/article/details/51242989
canvas标签,canvas的中文意思是”画布”,而它在网页中的表现,也是画布的角色。
- 1
- 2
- 3
有些浏览器不支持canvas标签,此时就回看到canvas标签里的文字提示信息。
canvas的默认宽度是300px,默认高度是150px;
注意: canvas的宽度和高度设置要写在canvas标签中,不能通过CSS设置,通过CSS设置的宽高可以看作是缩放,如果缩放的太过随意,那么在canva上的画图也会变形。因此必须在canvas的标签中设置canvas的宽和高。
要在canvas上画图:
第一步是获取canvas标签
var canvas = docunment.querySelector(“#platte”);
第二步是设置canvas的绘图环境,目前仅支持2d绘图环境。
var palette = canvas.getContext(“2d”);//2d绘图环境
计算机屏幕,原点都是在左上角,Y轴向下表示正方形,canvas也是这样。
我们从画一条最简单的直线说开去:
在开始画之前,先拿出画布和画笔
- 1
- 2
我们画画的时候,落笔点是不固定的,随时都会变。canvas虽然不是通过手来决定落笔点,但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布,然后移动到指定的点(即坐标)。
- 1
开始画,我们要画的是直线,使用lineTo(x,y),当我们画线时,落笔点也跟着移动到lineTo的位置。
- 1
- 2
但是,仅仅这样,并不会出现料想中的线,因为我们还少了一个步骤,lineTo画的其实是一条”路径”,本身是不可见的,如果要让它显示出来,我们还需要进行”画”的操作,使用stroke()或者是fill();因为我们是画一条直线,因此使用stroke描边。
- 1
- 2
- 3
再刷新网页,就能看到线条了。
此外,因为canvas绘图过程,非常消耗资源,因此,如果想节省系统资源,提高效率,最好是绘制好所有的路径,再一次性填充或者是描边。
- 1
- 2
- 3
- 4
- 5
默认的线条颜色是黑色,默认的线宽是1px;
通过lineWidth和strokeStyle可以修改线宽和线条颜色。
如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
可以看到,左上角部分缺了一块。而且通过测量,可以发现,这个红色的正方形是110px*110px,而不是120px*120px;Canvas中的线条都有一条“中线”,这条中线位于line的绝对中间,线条的笔画以中线向两侧扩展。所以10px是向内侧和外侧各5px;这样就不难理解为什么结果是110px,而不是120px了。也正是因为这个原因,左上角出现缺角就理所当然了。因为这里没有被画到。
其余的角之所以没有出现缺角,是因为,我们在画线的过程中,没有将画笔提起来,画笔是连续的。如果我们在个位置都将画笔提起来呢?
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
可以看出每个角都出现了一个缺角。
回到第一个问题,如果修复这个缺角?实际上,出现这个问题的另一个原因是因为我们的路径没有闭合,此时,只是起点和重点重合,但是路径本身并没有闭合。我们试试看,加个closePath();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
再刷新网页,可以看到,缺角已经消失了。
上面的正方形角是尖的,如果我们希望是圆角,该如何做呢?
此时,需要借助于lineJoin属性,lineJoin的意思是线的交汇处,有三个属性值:miter(默认、尖角)、bevel(斜角)、 round(圆角)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
与lineJoin类似的一个属性是lineCap,lineCap有3个属性值:butt(平,默认值),round(圆),square(方)
其实平头跟方头是一样的,区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截,这一节是多长呢?就是线条宽度的一半。
最后需要说明的是:闭合路径没有端点,所以闭合的路径看不到端点的样式.
了解一下canvas中两个重要的方法:beginPath()和closePath();
beiginPath()开始一段新路径
canvas中的绘制方法(如stroke,fill),都是以”上一次的beiginPath”之后的所有路径为基础进行绘制。
如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
得到的是两条红线,而并非是一条黑线,一条红线。
并且,仔细观察,我们还会发现,第一条直线的宽度要比第二条宽度要宽。这是因为canvas的每条线都有一条无限细的中线,线条的宽度是从中线向两侧延伸的,因为计算机是不允许小于1px的图形的,因此延伸后的宽度变成了2px.Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。为了解决这个问题,我们让线条的中线和像素的中间点对齐,如本例中的第二条曲线的画法。另外,对于lineWidth>1的线,我们可以忽略这个问题,只有线宽为1px的时候,这个问题最明显。
- 不管你用moveTo把画笔移动到哪里,只要不beginPath,那你一直都是在画一条路径。
- fillRect与strokeRect这种直接画出独立区域的函数,也不会打断当前的path.
如果你画出的图形和你想像的不一样,记得查看是否有合理的
说到beiginPath,就不得不提及closePath();
必须要注意的一点是:closePath()的作用不是结束路径,而是关闭路径,它会试图从当前路径的重点连一条路径到起点,让整个路径闭合起来。但是,这并不意味着它之后的路径就是新路径了。
如上面的例子,即使我们在第一个stroke之后,加上一句closePath()也不会出现一红一黑的线,但是如果我们在第一个stroke之后,加上一句beginPath(),可以如愿以偿的得到2个
不要企图通过闭合现有路径来开始一条新路径,而开始一条新路径,以前的路径也不会闭合。
因此在适当的地方开启新路径和闭合路径。