• Foundation HTML5 Canvas中的2处错误


         最近公司项目需要使用HTML5 Canvas开发公司大厅展示系统,当然这个项目还在进行中,不过我在进行另外一个新项目,等项目结束时,我将分享项目代码。学习HTML5 canvas主要书籍是《Foundation HTML5 Canvas For Games and Entertainment》,已经有中文版,名叫《HTML5 Canvas基础教程》。英文说中的实例有2处错误。

         第一处:Chapter4 Gradients小结中,实例代码:

    var gradient = context.createLinearGradient(0, 0, 0, canvas.height());
    gradient.addColorStop(0, "rgb(0, 0, 0)");
    gradient.addColorStop(1, "rgb(255, 255, 255)");
    context.fillStyle = gradient;
    context.fillRect(0, 0, canvas.width(), canvas.height());

    浏览器会提示canvas没有width方法,当然也没有height方法。经过搜索,width和height应该是canvas的属性,应该写canvas.width和canvas.height。

         第二处:在Chapter4 Exporting the canvas as an image中有一段代码

    context.save();
    context.fillRect(50, 50, 100, 100);
    context.fillStyle = "rgb(255, 0, 0)";
    context.fillRect(100, 100, 100, 100);
    context.restore();
    context.fillRect(150, 150, 100, 100);
    var dataURL = canvas.get(0).toDataURL();

    经过测试,发现canvas.get(0).toDataURL()在Chrome和Firefox都出现错误,提示canvas没有get方法。 查阅官方文档http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html。文档给出了2个方法:url = canvas . toDataURL( [ type, ... ])和canvas . toBlob(callback [, type, ... ]),使用canvas.toDataURL(),程序运行正确。

         关于翻译的问题,因为自己没有买《HTML5 Canvas基础教程》,不知道以上问题,中文翻译作者是否注意到。另外国内很多讲解HTML5教程或者博客中都没有涉及到HTML5 Canvas的旋转矩阵和平移矩阵,特别是使用HTML5 Canvas开发应用或者游戏,这2个矩阵左右很大,巧妙的使用它们可以给apps开发带来很大的帮助。

     

    本文基于 知识共享许可协议 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议发布,欢迎转载,演绎,但是必须保留本文的署名liminjun88(包含链接http://www.cnblogs.com/liminjun88/),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系

  • 相关阅读:
    期权波动率模型及交易策略分析
    k阶原点距和k阶中心距各是说明什么数字特征
    在Linux中监视IO性能
    NUMA微架构
    Web网站的几个QPS
    Elasticsearch与Solr 选型
    相关连接(后续更新)
    linux_基本命令使用(后续更新)
    centos7.5安装kafka(支持外部连接)
    centos7.5单机安装安装zookeeper
  • 原文地址:https://www.cnblogs.com/liminjun88/p/2342073.html
Copyright © 2020-2023  润新知