工作日记20151208

20151208am
1.看了一片文章，题目为The Developers Guide to HTML5 Canvas，印象比较深是canvas和svg的区别

• Here are some reasons to use the canvas over SVG.
  
  • the canvas is faster at drawing complex graphics
  • you can save images off the canvas whereas you can’t using SVG
  • everything in the canvas is a pixel. On the other hand
  -
• The SVG has some advantages too.
  
  • it’s resolution independent so it can scale for different screen resolutions
  • it’s xml, so targeting different elements is a breeze
  • it’s good at complex animations

2.回顾了以前学过的一个小项目，用矩形绘制成螺旋的效果，这里要注意的是,每当你调用translate,scale,rotate 时，它都会在前一个变换过的矩形上构建：

    btn.onclick=function(){                    ctx.translate(160,30);                    ctx.fillStyle = "rgba(120,93,222,0.25)";                    ctx.fillRect(0,0,100,50);                    for (var i = 0; i < 50 ; i++) {                        ctx.translate(10,10);                        ctx.scale(0.95,0.95);                        ctx.rotate(Math.PI/20);                        ctx.fillRect(0,0,100,50);                        }                }

3.七巧板的绘制，对于需要重复操作的步骤。可以建立一个对象数组，讲七块板子分别设置为七个对象，放入到七巧板的数组中，对于每一块板的对象，设置绘制成功依次所连的点的坐标（用数组表示）为一个属性值，绘制颜色为一个属性值，对这个大的数组对象进行遍历，将每块板子分别传入到绘制函数中，同时将context传入，在绘制函数中将每个板子的坐标点进行遍历，然后取子对象中的颜色属性即可。
20151208pm
1.一下午都在慕课网上学习《绚丽的倒计时效果的学习》，这个倒计时的思路是这样的

1. 对点阵图的构建
   
   在这个二维数组中，如果值为1则填一个实心的圆，如果是0则为空白，单独创建一个js文档，定义一个三维数组digit[]，将0-9的数字和”:”对应的数组形式的点阵放入其中。
2. 数字的绘制
   
   创建一个绘制函数，设置hours,minutes,seconds变量为固定值，创建一个数字绘制函数，传入位置，该数字的值，以及画笔ctx，计算绘制的位置，单个数字的宽度是14*（R+1）,为了留出间隙，这里设为15*（R+1）,遍历digit数组，选出对应的数字并进行绘制，这样就可以绘制出各个位置的数字了。
3. 倒计时时间的获取
   设定一个常量为终止时间，这里要注意，该时间距离现在的时间差的小时数应为两位数，同时，设定时间时，月份=实际月份-1，设定一个当前时间显示变量，设定一个函数getCurrentShowTimeSeconds，在函数内部获取当前时间与终止时间差返回给当前显示时间，这个时间差单位为秒，再利用这个时间差计算出对应的hours,minutes,seconds，放入绘制函数中。

const endTime = new Date(2015,11,10,20,0,0);

1. 动画效果的实现

setInterval(        function(){        ctx.clearRect(0,0,1024,768);        render(context);        update();        },        50    );

采用定时器，如果只有倒计时效果，不需要update()函数，此处因为要做特效，要注意清空画布或重新绘制背景，50不控制倒计时的速度，会影响小球运动的帧率，越小越流畅。
update函数中要重新定义一个下次显示变量，也传入getCurrentShowTimeSeconds函数，用来判断当前显示与下一次显示是否相同，在不同的数字生成彩球。设定一个生成小球的函数，传入生成位置（时？分？秒？）和数字，遍历digit数组，创建一个小球对象，设定位置坐标，g,vx,vy,color这些属性，除位置外，其他属性应加上随机因子，将单个小球对象依次push进一个全体小球数组balls[],在绘制函数中通过遍历全体小球数组绘制小球，为了使小球运动起来，在update函数中还要调用一个updateBalls函数，遍历全体小球,并设定碰撞条件。

function updateBalls(){    for (var i = 0; i < balls.length; i++) {        balls[i].x += balls[i].vx;        balls[i].y += balls[i].vy;        balls[i].vy += balls[i].g;        if ( balls[i].y >= WINDOW_HEIGHT-R){            balls[i].y = WINDOW_HEIGHT-R;            balls[i].vy = - balls[i].vy*0.5;        }    }}

遇到的问题：在代码全部完成时出现Uncaught TypeError: Cannot read property 'length' of undefined countdown.js:142
这是由于设定endTime时月份没有减一导致小时数超过两位数，digit中没有对应的子数组，以后遇到问题要学会逐个排查。