Html5系列之Canvas

Html5系列之Canvas

基础知识

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

问题

  1. 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里面的大小。

    
    

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

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

参考

  1. Html5 Canvas Tutorial
  2. create html5 canvas javascript drawing app

你可能感兴趣的:(html5,javascript,chrome,浏览器,图形)