canvas絢麗倒計時實現代碼分享

來源：懂視網責編：小OO 時間：2020-11-27 20:03:53

canvas絢麗倒計時實現代碼分享

效果圖。html。<；<。DOCTYPE html>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；ball<；/title>；<；script src="；digit_1.js"；>；<；/script>；<；script src="；countdown.js"；>；<；/script>；<；/head>；<；body >；<；canvas id="；canvas"；>；<；/canvas>。

推薦度：

點擊下載本文 文檔為doc格式

導讀效果圖。html。<；<。DOCTYPE html>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；ball<；/title>；<；script src="；digit_1.js"；>；<；/script>；<；script src="；countdown.js"；>；<；/script>；<；/head>；<；body >；<；canvas id="；canvas"；>；<；/canvas>。

本文主要為大家帶來一篇canvas基礎繪制-絢麗倒計時的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。

效果圖：

html：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ball</title>
 <script src="digit_1.js"></script>
 <script src="countdown.js"></script>
</head>
<body >
<canvas id="canvas" ></canvas>
</body>
</html>

digit_1.js在之前的 canvas基礎繪制-倒計時中有貼

countdown.js:

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

var endTime = new Date();//const聲明變量，不可修改，必須聲明時賦值；
endTime.setTime( endTime.getTime() + 3600*1000);//當前時間向后一小時；
var curShowTimeSeconds = 0;

var balls =[];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

window.onload = function () {
 //屏幕自適應
 WINDOW_WIDTH = document.body.clientWidth;
 WINDOW_HEIGHT = document.body.clientHeight;

 RADIUS = Math.round(WINDOW_WIDTH*4/5/108)-1;

 MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);
 MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);

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

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

 curShowTimeSeconds = getCurrentShowTimeSeconds();
 setInterval(
 function () {
 update();
 render(context);
 },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){
 if(parseInt(curHours/10)!=parseInt(nextHours/10)){
 addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));
 }
 if(parseInt(curHours%10)!=parseInt(nextHours%10)){
 addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
 }

 if(parseInt(curMinutes/10)!=parseInt(nextMinutes/10)){
 addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
 }
 if(parseInt(curMinutes%10)!=parseInt(nextMinutes%10)){
 addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
 }

 if(parseInt(curSeconds/10)!=parseInt(nextSeconds/10)){
 addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
 }
 if(parseInt(curSeconds%10)!=parseInt(nextSeconds%10)){
 addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
 }

 curShowTimeSeconds = nextShowTimeSeconds;
 }
 
 updateBalls();
}
function updateBalls() {

 //循環遍歷每一個彩色動畫小球
 for(var i=0;i<balls.length;i++){
 balls[i].x+=balls[i].vx;
 balls[i].y+=balls[i].vy;
 balls[i].vy+=balls[i].g;
 //落到畫布最底部時反彈起來
 if(balls[i].y>=WINDOW_HEIGHT){
 balls[i].y = WINDOW_HEIGHT-RADIUS;
 balls[i].vy = -balls[i].vy*0.75;
 }
 }

 // 如果小球出了畫布，就清除小球,性能優化
 var cnt = 0;
 for(var i=0;i<balls.length;i++){
 if(balls[i].x-RADIUS>0&&balls[i].x+RADIUS<WINDOW_WIDTH){
 balls[cnt++] = balls[i];
 }
 }

 while (balls.length>Math.min(300,cnt)){
 balls.pop();
 }
}

function addBalls(x,y,num) {


 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 aBall = {
 x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
 y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
 g: 1.5 + Math.random(),
 vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,//pow(x,y),x 的 y 次冪;ceil()可對一個數進行上舍入;
 vy: -5,
 color: colors[Math.floor(Math.random() * colors.length)]//floor()對一個數進行下舍入
 };
 balls.push(aBall);
 }
 }
 }
}
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);
 //彩色動畫小球的繪制
 for(var i=0;i<balls.length;i++){
 cxt.fillStyle = balls[i].color;

 cxt.beginPath();
 cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
 cxt.closePath();

 cxt.fill();
 }
}

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

canvas絢麗倒計時實現代碼分享

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現代碼倒計時

熱門焦點

canvas絢麗倒計時實現代碼分享

canvas絢麗倒計時實現代碼分享

canvas絢麗倒計時實現代碼分享

最新推薦

猜你喜歡

熱門推薦