HTML5 canvas易错点
一、画布的默认宽高
<canvas id="myCanvas" style="border:1px solid black;">
你的浏览器不支持html5
</canvas>
通过火狐浏览器访问，看到
通过截图工具发现，矩形的宽为300 高为150。但是我在w3school中看到的信息室说canvas默认宽高都为300
不过不是我要讨论的东西，可先忽略。
我们知道canvas只是html的一个新标签。因此，我们也可以用css来修改canvas画布的宽高大小。
但是，除非特殊情况，一定不要用css来定义Canvas的宽高。
两者的区别，在于:
Canvas自身的宽高就是画布本身的属性，而css给他的宽高则可以看作是缩放.
代码例子:
这是通过js来设置画布canvas的宽高，在保持文本设置不变的情况下，修改width以及height,会发现，文本处于不变的状态。
这是通过css来设置画布canvas的宽高，在保持文本设置不变的情况下，修改width以及height,会发现，文本会随着设置而变化，而且有了缩放的感觉。
二、canvas画布只能共享一支画笔
在前面已经提到，在有了画布的情况下，我们要对画布进行操作，则需要画笔来进行。
canvas获取画笔 var ctx = c.getContext("2d");
我刚开始的时候，认为反正getContext只是方法。所以多调用几次，就可以整出多几只笔出来。比如:
var ctx = c.getContext("2d");
var ctx1 = c.getContext("2d");
后来通过浏览器访问时，oh my god。不行啊。
代码例子:
运行结果图:
从这里，我们就可以知道，canvas只能共享一支画笔。如果你需要画出不同的颜色，办法就是把这只唯一的“笔”不停的蘸上新颜色哦。^_^
三、路径问题即beginPath方法使用
在进行线条或者图形绘制时，最好在开头开始beginPath
在学习canvas的线条或者矩形线条的使用时，我感到奇怪的是，有些案例，每画一条线条，在开始时都会使用beginPath作为开头，而有些案例，则没有。真够坑的。
看了手册的解释说是，开启一条新的路径。那么它有什么重要的？
代码例子:
访问结果图:
从结果图，可以看出
1、结果不是一红 一黄。
2、第一条线条被描绘了两次。
如何理解这个结果.
我的理解是，我用手在画板上，用一支红色的笔画出一线条。然后，用一支黄色的笔再画出另一线条。那么，为什么我不会对第一条再次绘制呢？这是因为我知道，这两条线条是不同的。因此，我不会。而计算机不知道，它无法区别这两条线条是不是同一的。而要如何进行区别呢？就要用到beginPath。否则的话，canvas中的绘制方法，都会以“上一次beginPath”之后的所有路径为基础进行绘制了。
启用beginPath也有个好处，就是提高性能。否则，就会对之前的线条进行重新绘制了。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
