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也有个好处，就是提高性能。否则，就会对之前的线条进行重新绘制了。