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();
}
}
要这么改：
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;
// }
}
}浏览器报错了，显示Uncaught TypeError: Cannot read property 'getContext' of null
因为context = null 是空的