工作日记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则填一个实心的圆，如果是0则为空白，单独创建一个js文档，定义一个三维数组digit[]，将0-9的数字和”:”对应的数组形式的点阵放入其中。

数字的绘制



创建一个绘制函数，设置hours,minutes,seconds变量为固定值，创建一个数字绘制函数，传入位置，该数字的值，以及画笔ctx，计算绘制的位置，单个数字的宽度是14*（R+
4000
1）,为了留出间隙，这里设为15*（R+1）,遍历digit数组，选出对应的数字并进行绘制，这样就可以绘制出各个位置的数字了。

倒计时时间的获取

设定一个常量为终止时间，这里要注意，该时间距离现在的时间差的小时数应为两位数，同时，设定时间时，月份=实际月份-1，设定一个当前时间显示变量，设定一个函数getCurrentShowTimeSeconds，在函数内部获取当前时间与终止时间差返回给当前显示时间，这个时间差单位为秒，再利用这个时间差计算出对应的hours,minutes,seconds，放入绘制函数中。

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

动画效果的实现

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中没有对应的子数组，以后遇到问题要学会逐个排查。