《HTML5 Canvas核心技术》书评

入门很不错

【本书适合的读者】①具有html/css/JavaScript基础，并不需要读者有太深的功底②对HTML5 Canvas画图功能感兴趣的【本书可以帮你】①巩固你对原生JavaScript的理解，包括原型、对象、函数、事件等等。②养成良好的web前端编程习惯。因为本书的代码基本遵循了Douglas Crockford在《JavaScript, The Good Parts》中给出的建议来写，例如：所有函数作用域内部的变量都声明在函数头部；每个变量的声明都单独占一行；总是使用===操作符及其同类操作来进行相等性测试。所以，阅读本书的代码，可以帮你养成好的JS编码习惯。最初的想法是：感觉HTML5 Canvas很好玩，所以特地买了这本书来学习。当时计划的是两个月内学完吧。但由于处在校招季，所以并没有马不停蹄地学习这本书，而是断断续续。刚接触canvas，之前粗读了一本HTML5的书，其稍微讲解了几个canvas的例子，例如画动态时钟，画贝赛尔曲线。但是它的JS代码相当难看，十分低效。这本书刚读了20来页。看了下“一个基本的时钟程序”代码。感觉比较清晰。但还是不够好。例如【17页】：loop = setInterval(drawClock, 1000);这个就不好。因为drawClock里面真正需要每一秒都刷新的只有三个指针。而且1000ms才刷新一次也不好，应该250毫秒或者200毫秒刷新一次。【73页】程序清单2-14 绘制坐标轴在函数 drawAxes()里，第6行与第7行重复了（第6行应该是多余的）。【75页】程序清单2-15 橡皮筋式的线条绘制<select>标签里，id属性前应该有一个空格，书里给漏了。应该只是排版问题。【86页】2.9.3节，对arcTo()函数的用法进行了介绍，但是并不够好。我在网上找了一个目前来看最好的中文介绍，见 http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE6%EF%BC%9A%E7%94%BB%E6%9B%B2%E7%BA%BF%E4%B9%8Barcto/ 【108页】程序清单2-29，这个应该只是排版问题。.floatingControls的属性书写有误，-webkit-box-shadow和-moz-box-shadow的x、y 偏移之间要有空格：-webkit-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;-moz-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;（2013-10-22）读到现在，感觉作者对于模块开发、功能细化做得非常好。每个具体的功能都有函数来完成，从中也可以学习到事件处理、面向对象编程的思想，以及一些好的编程习惯（当然也有局限性）。例如，每个example.js中，变量的声明总会放在函数或文档的最开始，这个习惯值得借鉴。不过，大部分的示例程序都声明了很多的全局变量，这对于示例来说无可厚非，但在真实的网站应用开发中，全局变量能少声明就少声明。【110页起，程序清单2-30】这个例子通过拖动端点与控制点来编辑贝赛尔曲线，算是比较长的代码了。JS+HTML代码300多行。我是手敲代码练习的，发现一个小问题：112页的，function drawRubberbandShape(loc){updateEndAndControlPoints();drawBezierCurve();}其实并不需要传递loc参数进去。【247页】程序清单5-10，function draw(){......}这个函数有两个不当之处：（1）虽然JS是基于词法作用域的，变量总是自动提前声明，但var disc= discs[i]; 仍然是不合适的，应该与update()函数保持一致，写为：var disc = null;（2）在接下来的for循环中，笔者貌似不小心声明了一个全局变量gradient。要知道从作用域链上面寻找全局变量是比较慢的，而这里又频繁地调用这个gradient变量，所以它应该是一个局部变量，应该在for循环之前声明：var gradient;即可。其他的，继续看，然后再写。