为什么直接使用setInterval(getCurrentShowTimeSeconds(),50)不行？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么直接使用setInterval(getCurrentShowTimeSeconds(),50)不行？

来源：4-1 一个实现动画的基础函数

飞天意大利面神兽

2016-07-13 09:47

如题？这节课的原理到底是啥？按道理，直接设置定时器那不就会动了吗？

写回答关注

5回答

火麒麟1234

2016-07-13 12:56:59

老师前面就说过，setInterval()中的两个函数，是一个设置动画的基本框架。多年的开发经验。。。。。。。

0 0
飞天意大利面神兽

2016-07-13 10:24:12

尼玛。。。原来还有一句，
canvas clearRect() 方法
。。。。可我还是不懂老师为什么要那样写

0 0

飞天意大利面神兽: 2016-07-13 10:07:21

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="digit.js"></script>
	<script type="text/javascript" src="my_1.js"></script>
	<body>
		<canvas id="canvas" style="border: 1px solid gray;margin: 50px auto;display: block;">
			当前浏览器不支持Canvas，请更换浏览器再试
		</canvas>
	</body>

</html>

var r=6;
var wd=120;
var showtime;

const endTime=new Date(2016,6,14,18,47,52);

window.onload=function(){
	var canvas=document.getElementById("canvas");
	var context=canvas.getContext("2d");
	
	canvas.height=768;
	canvas.width=1366;
	setInterval(function(){
		MyTime(context)
	}
	,50);
	
}

function MyTime(ct){
	var nowtime=new Date();
	var showtime=endTime.getTime()-nowtime.getTime();
	if(showtime<=0){
		showtime=0;
	}
	showtime=Math.round(showtime/1000);
	
	var hours=parseInt(showtime/3600),
		minutes=parseInt((showtime/60)%60),
		seconds=parseInt(showtime%60);
		console.log('一'+hours);
		console.log('二'+minutes);
		console.log('三'+seconds);
	
	mycanvas(0,0,ct,parseInt(hours/10));
	mycanvas(wd,0,ct,parseInt(hours%10));
	
	mycanvas(wd*2,0,ct,10);
	
	mycanvas(wd*3,0,ct,parseInt(minutes/10));
	mycanvas(wd*4,0,ct,parseInt(minutes%10));
	
	mycanvas(wd*5,0,ct,10);
	
	mycanvas(wd*6,0,ct,parseInt(seconds/10));
	mycanvas(wd*7,0,ct,parseInt(seconds%10));
}

function mycanvas(X,Y,ct,num){
	ct.fillStyle='red';
	for(var y=0;y<digit[num].length;y++)
		for(var x=0;x<digit[num][y].length;x++){
			if(digit[num][y][x]==1){
				ct.beginPath();
				ct.arc(X+x*(r+2)*2+(r+2),Y+y*(r+2)*2+(r+2),r,0,2*Math.PI);
				ct.closePath();
				ct.fill();
			}
		}
}

0 0

飞天意大利面神兽

2016-07-13 10:06:44

不对。。。其实也可以。。。我自己写错了，可新的问题就是，随着时间变化，画布被填满了。。。

0 0

飞天意大利面神兽: 2016-07-13 09:53:50

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

const endTime = new Date(2014,6,11,18,47,52);
var curShowTimeSeconds = 0

window.onload = function(){

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

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    curShowTimeSeconds = getCurrentShowTimeSeconds()
    setInterval(
        function(){
            render( context );
            update();
        }
        ,
        50
    );
}

function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round( ret/1000 )

    return ret >= 0 ? ret : 0;
}

function update(){

    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

    if( nextSeconds != curSeconds ){

        curShowTimeSeconds = nextShowTimeSeconds;
    }
}

function render( cxt ){

    cxt.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);

    var hours = parseInt( curShowTimeSeconds / 3600);
    var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )
    var seconds = curShowTimeSeconds % 60

    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()
            }
}

0 0

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

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

96746 学习 · 1000 问题

查看课程

相似问题

为什么不直接把curShowTimeSeconds = getCurrentShowTimeSeconds();放到render函数中

回答 2

为什么不直接使用curShowTimeSeconds = getCurShowTimeSeconds()

回答 1

使用了setInterval()时间不会自动更新

回答 2

setInterval为什么设置的是50ms

回答 7

nextShowTimeSeconds和curShowTimeSeconds不是一样的吗？都是getCurrentShowTimeSeconds()的值，为什么还要比较？

回答 1

打开慕课网App查看更多内容