課程
/前端開發(fā)
/Html5
/炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫基礎(chǔ)
也沒有動(dòng)畫效果呢
2020-09-30
源自：炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫基礎(chǔ) 4-2
正在回答
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;
var?balls=[];
const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload=function(){
????//???/**?@type?{HTMLCanvasElement}?*/?/
????var?canvas=document.getElementById('canvas');
????var?context=canvas.getContext('2d');
????canvas.width=WINDOW_WIDTH;
????canvas.height=WINDOW_HEIGHT;
????curShowTimeSeconds=getCurrentShowTimeSeconds()
????//?render(context)
????setInterval(
????????function(){
????????????render(context)
????????????update()
????????},50
????);
}
function?getCurrentShowTimeSeconds(){
????//??/**?@type?{HTMLCanvasElement}?*/?
????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)?{
????//??/**?@type?{HTMLCanvasElement}?*/?//獲得canvas語法提示
????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){
????????//?/**?@type?{HTMLCanvasElement}?*/?//獲得canvas語法提示
????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()
?????????}
貼個(gè)代碼啊親，以后問問題建議貼代碼，要不大家也沒法定位問題的
qq_顏色 提問者
王師傅倒拔毛毛 回復(fù) qq_顏色 提問者
舉報(bào)
學(xué)習(xí)HTML5中最激動(dòng)人心的技術(shù)Canvas，徹底釋放自己的創(chuàng)造力
2 回答為什么出來的都是0，而且也不動(dòng)
1 回答為什么我的沒出來效果
2 回答老師，我看到過可以組成任何文字的canvas效果，是怎么做出來的呢
1 回答為什么效果出不來呢
1 回答老師好，你用的是什么開發(fā)工具呢？？？？？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2020-09-30
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;
var?balls=[];
const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload=function(){
????//???/**?@type?{HTMLCanvasElement}?*/?/
????var?canvas=document.getElementById('canvas');
????var?context=canvas.getContext('2d');
????canvas.width=WINDOW_WIDTH;
????canvas.height=WINDOW_HEIGHT;
????curShowTimeSeconds=getCurrentShowTimeSeconds()
????//?render(context)
????setInterval(
????????function(){
????????????render(context)
????????????update()
????????},50
????);
}
function?getCurrentShowTimeSeconds(){
????//??/**?@type?{HTMLCanvasElement}?*/?
????var?curTime=new?Date();
????var?ret=endTime.getTime()-curTime.getTime();
????????ret=?Math.round(ret/1000)
????return?ret?>=?0???ret?:?0;
}
function?update(){
????//??/**?@type?{HTMLCanvasElement}?*/?
????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)?{
????//??/**?@type?{HTMLCanvasElement}?*/?//獲得canvas語法提示
????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){
????????//?/**?@type?{HTMLCanvasElement}?*/?//獲得canvas語法提示
????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()
?????????}
}
2020-09-30
貼個(gè)代碼啊親，以后問問題建議貼代碼，要不大家也沒法定位問題的