学习了

来源:5-7 总结

莫名小晟

2014-12-02 21:54

对于一个文科生,数学还挂过科的人,尼玛这种数学计算真心不会啊,那么复杂的东西表示不会了,不过我把那个最早的代码call下来改成了一个电子时钟的显示大概就是这个样子吧。

547dc3ed0001577505000149.jpg

代码只做了几行修改,纯属娱乐吧

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var colors = ['#FF83FA','#EEEE00','#f58220','#7bbfea','#fcf16e','#6f60aa','#bed742','#d71345','#006c54','#afdfe4','#ef5b9c','#d93a49','#76becc','#cbc547','#426ab3','#11264f','#563624','#f15a22','#deab8a','#401c44']

window.onload = function(){

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
	
	render(context);
	
	setInterval(function(){
		context.clearRect(0, 0, canvas.width, canvas.height);
		render(context);
	},1000);
}

function render( cxt ){
	
	var date = new Date();
	var hours = date.getHours();
	var minutes = date.getMinutes();
	var seconds = date.getSeconds();
	
	if( hours<10 )   hours = "0"+hours;
	if( minutes<10 ) minutes = "0"+minutes;
	if( seconds<10 ) seconds = "0"+seconds;

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

    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 TheColor = colors[Math.floor(Math.random()*colors.length)];
					cxt.fillStyle = TheColor;
					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()
            }
}


写回答 关注

1回答

  • _卡卡C
    2016-01-13 23:57:34

    赞一个

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

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

96746 学习 · 1000 问题

查看课程

相似问题