不知道为什么效果只能显示一部分，height的高度也撑开了的啊-慕课网

不知道为什么效果只能显示一部分，height的高度也撑开了的啊

来源：5-3 改进成时间管理小工具

慕数据9493197

2016-11-06 11:14

这是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();
    }
}

可是显示出来是这样的为什么呢

写回答关注

4回答

qq_ForTheDream_33686428

2017-04-15 13:15:36

把宽度也撑开100%就行了

0 0
慕粉1006301048

2017-04-12 20:36:42

把html的高度也撑开

0 0

Jathy: 2017-01-16 00:49:10

试一下

<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="height: 100%;">
<canvas id="canvas" style=""height: 100%; ">
当前浏览器不支持Canvas,请更换浏览器后再尝试
</canvas>

<script src="digit.js"> </script>
<script src="countdown.js"> </script>

</body>
</html>

0 0