入门很不错
【本书适合的读者】
①具有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;
即可。
其他的,继续看,然后再写。
①具有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;
即可。
其他的,继续看,然后再写。
有关键情节透露