基础知识
基础知识可以参考后面的参考链接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属性会导致画布清空。