为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/Html5

/炫丽的倒计时效果Canvas绘图与动画基础

为什么只显示出一个12呢？？？

countdown.js

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;


window.onload = function(){


    var canvas = document.getElementById('canvas');

    var context = canvas.getContext("2d");


    canvas.width = WINDOW_WIDTH;

    canvas.height = WINDOW_HEIGHT;


    render( context );

};


function render( cxt ){


    var hours = 12;

    var minutes = 34;

    var seconds = 56;


    renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt );

    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);

}


function renderDigit( x , y , num , cxt ){


    cxt.fillStyle = "rgb(0,102,153)";


    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+1) , RADIUS , 0 , 2*Math.PI );

                cxt.closePath();


                cxt.fill();

            }

}



慕哥8045220

2017-09-29

源自：炫丽的倒计时效果Canvas绘图与动画基础  3-2

关注问题 我要回答
1470
操作
收起

正在回答

3 回答

小昊子
2017-10-08

要这么改：

const endTime = new Date(2017,9,3,0,0);
var curShowTimeSeconds = 0;//存储自1970年0时0分0秒到现在的毫米数，初始化为0；
var windowWidth = 1500;
var windowHieght = 800;
var R = 8;
var marginTop = 60;
var marginLeft = 30;


var balls = new Array(0);
const colors = ["#33E5B5","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#CC000C"];


// var c = document.getElementById("clock");
// var context = c.getContext('2d');
window.onload = function () {
    var canvas = document.getElementById("clock");
    var ctx = canvas.getContext('2d');
    canvas.width = windowWidth;
    canvas.height = windowHieght;
    curShowTimeSeconds = getCurrentShowTimeSeconds();
    setInterval(function () {
        render(ctx);
        upDate();
    },50);
};

function upDate() {
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    //var curShowTimeSeconds = 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;

    if (nextseconds != curseconds){

        if (parseInt(curhours/10) != parseInt(nexthours/10)){
            addBalls(marginLeft,marginTop,parseInt(curhours/10));
        }
        if (parseInt(curhours%10) != parseInt(nexthours%10)){
            addBalls(marginLeft+15*(R+1),marginTop,curhours%10);
        }//hours

        if (parseInt(curminutes/10) != parseInt(nextminutes/10)){
            addBalls(marginLeft +39*(R+1),marginTop,parseInt(curminutes/10));
        }
        if (parseInt(curminutes%10) != parseInt(nextminutes%10)){
            addBalls(marginLeft+54*(R+1),marginTop,curminutes%10);
        }//minutes

        if (parseInt(curseconds/10) != parseInt(nextseconds/10)){
            addBalls(marginLeft+78*(R+1),marginTop,parseInt(curseconds/10));
        }
        if (parseInt(curseconds%10) != parseInt(nextseconds%10)){
            addBalls(marginLeft+93*(R+1),marginTop,curseconds%10);
        }//seconds



        curShowTimeSeconds = nextShowTimeSeconds;
    }
    updateBalls();
}

function render(cxt) {
    cxt.beginPath;
    cxt.clearRect(0,0,windowWidth,windowHieght);
    cxt.font = "40px 宋体";
    cxt.fillText("距离10.3 0：00还有：",30,40);

    var hours = parseInt(curShowTimeSeconds / 3600);//总秒数除以3600秒，强制类型转换
    var minutes = parseInt((curShowTimeSeconds - hours *3600)/60);//总时间减去小时的秒数，除以60秒，强制类型转换
    var seconds = curShowTimeSeconds % 60;//总时间除以60为分钟数，其的余数为秒数

    //console.log("ds");
    renderDigit(marginLeft,marginTop,parseInt(hours/10),cxt);
    renderDigit(15*(R+1)+marginLeft,marginTop,parseInt(hours%10),cxt);
    renderDigit(30*(R+1)+marginLeft,marginTop,10,cxt);
    //hours
    renderDigit(39*(R+1)+marginLeft,marginTop,parseInt(minutes/10),cxt);
    renderDigit(54*(R+1)+marginLeft,marginTop,parseInt(minutes%10),cxt);
    renderDigit(69*(R+1)+marginLeft,marginTop,10,cxt);
    //minutes
    renderDigit(78*(R+1)+marginLeft,marginTop,parseInt(seconds/10),cxt);
    renderDigit(93*(R+1)+marginLeft,marginTop,parseInt(seconds%10),cxt);
    //seconds


    for (var i =0;i<balls.length;i++){
        cxt.fillStyle = balls[i].color;

        cxt.beginPath();
        cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI,false);
        cxt.closePath();
        cxt.fill();
    }
}

function renderDigit(x,y,num,ctx) {
    ctx.fillStyle = "rgb(0,102,153)";
    //console.log(digit[num].length);
    for (var i = 0;i<digit[num].length;i++){//遍历所有数字的点阵
        //console.log(digit[num][i]);
        for (var j = 0;j<digit[num][i].length;j++){//遍历所有点阵中的点
            if (digit[num][i][j] === 1){
                ctx.beginPath();
                ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,Math.PI*2,true);
                // 圆的margin为2，每个圆在一个格子中，圆的半径为R
                // 格子边长为2*(R+1);i为y坐标，j为x坐标；第(i,j)个圆的圆心位置：(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1))
                ctx.closePath();
                ctx.fill();
            }
        }
    }
}
function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round(ret/1000);
    return ret >=0 ? ret:0;
}
function addBalls(x,y,num) {
    //console.log(num);
    for (var i = 0;i<digit[num].length;i++){//遍历所有数字的点阵
        //console.log(digit[num][i].length);
        for (var j = 0;j<digit[num][i].length;j++){//遍历所有点阵中的点
            if (digit[num][i][j] === 1){
                //var airResistance = 0.7;
                var aBall = {
                    x:x+j*2*(R+1)+(R+1),
                    y:y+i*2*(R+1)+(R+1),
                    a:2 + Math.random()*10,
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*30,
                    vy:-Math.floor(Math.random()*30),
                    color:colors[Math.floor(Math.random()*colors.length)]
                };
                balls.push(aBall);
            }
        }
    }
}

function updateBalls() {
    for (var i =0 ;i<balls.length;i++){
        balls[i].x+=balls[i].vx;
        balls[i].y+=balls[i].vy;
        balls[i].y+=balls[i].a;

        if (balls[i].y >= windowHieght - R) {
            balls[i].y = windowHieght - R;
            balls[i].vy = -balls[i].vy*0.8;
        }
        if (balls[i].y <= R){
            balls[i].y = R;
            balls[i].vy = -balls[i].vy*0.8;
        }
        // if (balls[i].x >= windowWidth - R){
        //     balls[i].x = windowWidth - R;
        //     balls[i].vx = -balls[i].vx*0.8;
        // }
        // if (balls[i].x <= R){
        //     balls[i].x = R;
        //     balls[i].vx = -balls[i].vx*0.8;
        // }
    }
}


0 回复 有任何疑惑可以回复我~
收起回答
小昊子
2017-09-30

浏览器报错了，显示Uncaught TypeError: Cannot read property 'getContext' of null

0 回复 有任何疑惑可以回复我~
收起回答
小昊子
2017-09-30

因为context = null 是空的

0 回复 有任何疑惑可以回复我~
收起回答
#1

慕粉0302633

那怎么改呢？不会/尴尬
2017-09-30 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
炫丽的倒计时效果Canvas绘图与动画基础
  • 参与学习       96725    人
  • 解答问题       999    个

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

进入课程

本课相似问答

1 回答为什么for循环只显示最后一个

1 回答为什么只有画布 显示不出直线？

1 回答为什么我只显示小时

2 回答代码一样，为什么我的只显示边框

3 回答为什么显示不出来呀？这个代码一模一样
搜索更多本课相关问答

为什么只显示出一个12呢？？？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信