不知道为什么 效果只能显示一部分，height的高度也撑开了的啊
这是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="canvas03.js"></script>--> <script src="canvas%20daojishi.js"></script> <!--<script src="canvas01.js"></script>--> <!--<script src="countdown.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;
//屏幕自适应
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)；
var context=canvas.getContext("2d");
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(); //下一个时间
//下一个时间分解
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.小球运动值的变化 //.碰撞检测
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>=canvas_height-radius) {
balls[i].y = canvas_height - radius;
balls[i].vy = -balls[i].vy * 0.75; //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 // 不同
// 在X轴上的加速度 //Math.round() 四舍五入取整 //random() 0 ~ 1 之间 随机数。
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, //1-1000//取整 //取-1 或+1 //*4//-4至+4
// Math.ceil向上取整 //pow() 方法可返回 x 的 y 次幂的值。在这里是 -1的N次幂
vy: -5, //向上抛一点点
//math.floor(x)对浮点数向下取整 //
color: colors[Math.floor(Math.random() * colors.length)] //颜色数组
};
balls.push(aBall);
}
}
function render(cxt) { //在画布上描述
cxt.clearRect(0,0,canvas_width,canvas_height); //clearRect() 方法清空给定矩形内的指定像素 //画布更新 //时间变化不重复
//当前的时间
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();
}
}可是显示出来是这样的 为什么呢
