Html5系列之Canvas

Html5系列之Canvas

基础知识

基础知识可以参考后面的参考链接Html5 Canvas Tutorial。

问题

canvas的大小必须通过height和width属性来指定，而不能通过style的height和width指定。其实style的height和width是指定canvas在整个页面中渲染的大小，但是canvas本身作为画布的大小却只能用height和width属性指定。如果没有指定height和width，那么会有一个默认值，譬如我的chrome浏览器里面为150px和300px。如果你在style里面指定height和width分别为300px和600px的话，那么在作图的时候相当于把图纵向放大300/150=2倍，横向放大了600/300=2倍。所以这样做出来的图形是很奇怪的。总结起来就是用如下的代码设定大小，而不要指定style里面的大小。

<canvas id="drawCanvas" width="768" height="1024"></canvas>

关于这个问题你可以在stackoverlow上面找到类似的答案,在这里有个demo可以参考。

修改canvas的height和width属性会导致画布清空。

参考

Html5 Canvas Tutorial
create html5 canvas javascript drawing app