suchen

Heim >Web-Frontend >js-Tutorial >Canvas wunderschöne Countdown-Implementierungscode-Freigabe

Canvas wunderschöne Countdown-Implementierungscode-Freigabe

小云云
小云云Original
2018-02-06 11:52:081396Durchsuche

Dieser Artikel enthält hauptsächlich ein Beispiel für das einfache Zeichnen auf Leinwand – einen wunderschönen Countdown. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Rendering:

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 In Die vorherige Leinwand-Grundzeichnung - Countdown, es gibt einen Beitrag

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

Verwandte Empfehlungen:

So implementieren Sie die Countdown-Funktion für zeitlich begrenzte Verkäufe

jquery Countdown-App-Implementierungscode

JQuery-Implementierungscode für Countdown- und SMS-Countdown-Funktionen

Das obige ist der detaillierte Inhalt vonCanvas wunderschöne Countdown-Implementierungscode-Freigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie die Countdown-Funktion für zeitlich begrenzte VerkäufeNächster Artikel：So implementieren Sie die Countdown-Funktion für zeitlich begrenzte Verkäufe

In Verbindung stehende Artikel

Mehr sehen