为什么我的没有效果呢 不知道哪里错了 求大神指导
来源：4-1 一个实现动画的基础函数
慕数据9493197
2016-11-03 11:32
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas倒计时效果</title></head><body style="height: 100%"><canvas id="canvas" style="height: 100%"> 当前浏览器不支持Canvas，请更换浏览器后再试</canvas><script src="digit.js"></script><script src="canvas%20daojishi.js"></script></body></html>
/////////js代码///////////
var canvas_width=1024;
var canvas_height=768;
var radius=8;
var margin_top=60;
var margin_left=30;
//const修饰的数据类型是指常类型，常类型的变量或对象的值是不能被更新的 //endtime 截至时间
// const endTime=new Date(2016,10,7,0,0,0); //new date() 不能超过距离现在的99小时 因为小时设定只有两位数 只能99小时 4天 月份0——11
//自动更新时间
var endTime=new Date(); //得到当前的时间
endTime.setTime(endTime.getTime()+3600*1000); //设置当前时间（得到当前时间（毫秒）+1h（3600）s*1000转换为毫秒）
var curShowTimeSeconds=0; //当前时间秒数为0
var balls = []; //小球数组
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
window.onload=function () {
var canvas=document.getElementById("canvas");
// canvas.width=canvas_width;
// canvas.height=canvas_height;
var context=canvas.getContext("2d");
//屏幕自适应
canvas_width=document.body.clientWidth;
canvas_height=document.body.clientHeight;
margin_left=Math.round(canvas_width/10);
margin_top=Math.round(canvas_height/5);
radius=Math.round((canvas_width*4/5)/108)-1;
//render这个函数里面有个renderDigit()
//依次绘制时分秒的每个数字，秒的个位数到区域左边的距离是 93*(R+1)，
// 并且本身一个数的宽度是15*(R+1)，
// 所以得到了区域总宽为93*(R+1)+15*(R+1)=108*(R+1)，
// 也就是window_width*4/5 = 108 *(R+1)；
curShowTimeSeconds=getCurrentShowTimeSeconds();
// render(context); //渲染 具体绘制 //替换为setInterval()
//动画效果的实现
setInterval(
function () {
render(context); //在画布上描述 //下面已完成
update(); //数据的变化
},50
)
};
//得到当前时间
function getCurrentShowTimeSeconds() {
var curTime=new Date(); //取得当前的时间
var retTime=endTime.getTime()-curTime.getTime(); //倒计时=结束时间-当前时间 //getTime() 得到毫秒数
retTime=Math.round(retTime/1000); //round() 方法可把一个数字舍入为最接近的整数。// ret/1000 把毫秒转换为秒
return retTime>=0? retTime:0; //判断reTime是否>=0 如果是 则返回 ret 否则返回0
}
//数据变化
function update() {
//1.时间变化
var nextShowTimeSeconds=getCurrentShowTimeSeconds(); //得到下一个时间
//下一个时间分解 parseInt()解析一个字符串，并返回一个整数
var nextHours=parseInt(nextShowTimeSeconds/3600);
var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
var nextSeconds=nextShowTimeSeconds%60;
//当前时间分解
var curHours=parseInt(curShowTimeSeconds/3600);
var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
var curSeconds=curShowTimeSeconds%60;
//2.添加小球位置的变化
if (nextSeconds != curSeconds) { //判断下一个时间是否等于当前的时间//当不等于的时候
//时间变化时，添加小球
//小时
if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
addBalls(margin_left, margin_top, parseInt(curHours / 10)); //位置 X Y 以及 相应的数字
}
if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
addBalls(margin_left + 15 * (radius + 1), margin_top, parseInt(curHours % 10))
}
//分钟
if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
addBalls(margin_left + 39 * (radius + 1), margin_top, parseInt(curMinutes / 10));
}
if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
addBalls(margin_left + 54 * (radius + 1), margin_top, parseInt(curMinutes % 10));
}
//秒钟
if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
addBalls(margin_left + 78 * (radius + 1), margin_top, parseInt(curSeconds / 10));
}
if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
addBalls(margin_left + 93 * (radius + 1), margin_top, parseInt(curSeconds % 10));
}
curShowTimeSeconds = nextShowTimeSeconds; //当前的时间就是==下一个时间
}
updateBalls(); //更新所有的小球
console.log(balls.length); //在控制台打印balls的长度 //不停加长 //解决性能优化
}
function updateBalls() {
//1.（1）小球运动值的变化
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;
//（2）.碰撞检测
if (balls[i].y>=canvas_height-radius) {
balls[i].y = canvas_height - radius;
balls[i].vy = -balls[i].vy * 0.7; //0.75摩擦系数 越大越远
}
}
//2.性能优化 删除小球
var cnt=0; //小球数量
for (var i=0;i<balls.length;i++)
//右边缘>0 和 左边缘<canvas.width 说明在画布内 然后放在数组里
if(balls[i].x+radius>0 && balls[i].x-radius<canvas_width)
balls[cnt++] = balls[i];
while (balls.length>Math.min(200,cnt)){ //保留200到cnt之间的最小值
balls.pop(); //pop()用于删除并返回数组的最后一个元素
}
}
function addBalls(x,y,num) { //运动的彩色小球
for (var i=0;i<digit[num].length;i++) //记得没有；
for (var j=0;j<digit[num][i].length;j++) //记得没有；
if (digit[num][i][j]==1){
//定义一个小球变化的数值
var aBall={
x:x+j*2*(radius+1)+(radius+1),
y:y+i*2*(radius+1)+(radius+1),
g:1.5+Math.random(), //加速度 1.5-2.5 // 不同
//pow() 方法可返回 x 的 y 次幂的值。在这里是 -1的N次幂 // Math.ceil向上取整
// 在X轴上的加速度 //Math.round() 四舍五入取整 //random() 0 ~ 1 之间 随机数。
//1-1000//取整 //取-1 或+1 //*4//-4至+4
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -5, //向上抛一点点
//math.floor(x)对浮点数向下取整 //
color: colors[Math.floor(Math.random() * colors.length)] //颜色数组
};
balls.push(aBall); //把小球添加进小球数组里
}
}
//在画布上描述
function render(cxt) {
//clearRect() 方法清空给定矩形内的指定像素 //画布更新 //时间变化不重复
cxt.clearRect(0,0,canvas_width,canvas_height);
//当前的时间
var hours=parseInt(curShowTimeSeconds/3600);
var minutes=parseInt((curShowTimeSeconds-hours*3600)/60); //（现在秒-当前秒 ）/60 =分钟
var seconds=curShowTimeSeconds%60; //倒计时具体时间 //%60取余
//定义时间的在画布上的显示位置
renderDigit(margin_left,margin_top,parseInt(hours/10),cxt) ; //小时 //十位数 // 第一位 //起始位置 x y
renderDigit(margin_left+15*(radius+1),margin_top,parseInt(hours%10),cxt); //小时//个位数//第二位//
renderDigit(margin_left+30*(radius+1),margin_top,10,cxt); //冒号
renderDigit(margin_left+39*(radius+1),margin_top,parseInt(minutes/10),cxt); //分钟//第三位
renderDigit(margin_left+54*(radius+1),margin_top,parseInt(minutes%10),cxt); //分钟//第四位
renderDigit(margin_left+69*(radius+1),margin_top,10,cxt); //冒号
renderDigit(margin_left+78*(radius+1),margin_top,parseInt(seconds/10),cxt); //秒钟//第五位
renderDigit(margin_left+93*(radius+1),margin_top,parseInt(seconds%10),cxt); //秒钟//第六位
//绘制小球
for (var i=0;i<balls.length;i++){
cxt.fillStyle=balls[i].color;
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,radius,0,2*Math.PI,true);
cxt.closePath();
cxt.fill();
}
}
//具体的循环//规定何处填充颜色
function renderDigit(x,y,num,cxt) { //传入4个参数 X Y num cxt
cxt.fillStyle="#00ff00"; //定义好颜色
for (var i=0;i<digit[num].length;i++) //不能有；
for (var j=0;j<digit[num][i].length;j++) //不能有；
if (digit[num][i][j]==1){ //画圆
cxt.beginPath();
cxt.arc(x+j*2*(radius+1)+(radius+1),y+i*2*(radius+1),radius,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
写回答
关注
4回答
-
- 星空下的小孩
- 2016-11-08 22:10:18
你把11改成10就OK啦
-
- 星空下的小孩
- 2016-11-08 22:09:31
这个demo只能是四天之内的倒计时（小时为两位数，因为digit为三维数组），new Date()时，月份是从0开始的，即1代表2月。你看看是不是这个问题，我就是这个问题，然后就解决啦
-
- VicAura
- 2016-11-04 22:29:25
编程不好，放弃了。。。我找了一上午才找到的问题，找到问题我已经很开心了，建议你吧那个日期如何调出来，能减出来一个正确的时间就好啦！
-
- VicAura
- 2016-11-04 11:29:18
我也没有效果，我的效果是一直就显示0，最后alert一下ret，减成了赋值，原来const endTime=new Date(2016,10,3,18,47,52);这个代码我用DW用不成，而且var curTime=new Date();这个值取出来也不是标准的年月日时分秒，所以ret返回的一直是0。不知道你是不是和我一样的问题。
炫丽的倒计时效果Canvas绘图与动画基础
学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力
96746 学习 · 1000 问题
相似问题
为什么会没有结果呢？求大神指点
回答 5
不知道哪里不对，出不来效果
回答 3