canvas，製作炫酷的時鐘和倒計時

来源:http://www.cnblogs.com/niuniudashijie/archive/2016/11/05/6032469.html
-Advertisement-
Play Games

html部分 <!DOCTYPE html> <!--下麵三個百分比都是為了實現後期項目優化的時候，實現自適應屏幕的寬度和高度--> <html style="height: 100%;"> <!--這個需要HTML標簽上也得加上style="height:100%"才行，要不然會顯示一半，經常用C ...


html部分

<!DOCTYPE html>

<!--下麵三個百分比都是為了實現後期項目優化的時候，實現自適應屏幕的寬度和高度-->

<html style="height: 100%;">

<!--這個需要HTML標簽上也得加上style="height:100%"才行，要不然會顯示一半，經常用CSS的都知道，BODY 想高度100%，外標簽HTML也得設置100%-->

 

<head>

<meta charset="UTF-8">

<title></title>

 

</head>

 

<body style="height: 100%;">

<canvas id="canvas" style="height: 100%;"></canvas>

<script type="text/javascript" src="js/digit.js"></script>

<script type="text/javascript" src="js/countdown9.js"></script>

 

</body>

 

</html>

 

 

digit.js部分

digit =

    [

        [

            [0,0,1,1,1,0,0],

            [0,1,1,0,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,0,1,1,0],

            [0,0,1,1,1,0,0]

        ],//0

        [

            [0,0,0,1,1,0,0],

            [0,1,1,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [1,1,1,1,1,1,1]

        ],//1

        [

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,0,1,1,0,0,0],

            [0,1,1,0,0,0,0],

            [1,1,0,0,0,0,0],

            [1,1,0,0,0,1,1],

            [1,1,1,1,1,1,1]

        ],//2

        [

            [1,1,1,1,1,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,0,1,1,1,0,0],

            [0,0,0,0,1,1,0],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//3

        [

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,1,0],

            [0,0,1,1,1,1,0],

            [0,1,1,0,1,1,0],

            [1,1,0,0,1,1,0],

            [1,1,1,1,1,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,0,1,1,0],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,1,1]

        ],//4

        [

            [1,1,1,1,1,1,1],

            [1,1,0,0,0,0,0],

            [1,1,0,0,0,0,0],

            [1,1,1,1,1,1,0],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//5

        [

            [0,0,0,0,1,1,0],

            [0,0,1,1,0,0,0],

            [0,1,1,0,0,0,0],

            [1,1,0,0,0,0,0],

            [1,1,0,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//6

        [

            [1,1,1,1,1,1,1],

            [1,1,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,1,1,0,0,0],

            [0,0,1,1,0,0,0],

            [0,0,1,1,0,0,0],

            [0,0,1,1,0,0,0]

        ],//7

        [

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//8

        [

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,1,1,0,0,0,0]

        ],//9

        [

            [0,0,0,0],

            [0,0,0,0],

            [0,1,1,0],

            [0,1,1,0],

            [0,0,0,0],

            [0,0,0,0],

            [0,1,1,0],

            [0,1,1,0],

            [0,0,0,0],

            [0,0,0,0]

        ]//:

    ];

 

 

 

countdown9.js部分

 

 

var WINDOW_WIDTH = 1024;

 

var WINDOW_HEIGHT = 768;

 

var RADIUS = 8; //定義小球的半徑

 

var MARGIN_TOP = 60; //每個數字距離畫布的上邊距的距離

 

var MARGIN_LEFT = 30; //第一個數字距離畫布的左邊距的距離

 

 

 

//定製截止時間(月是從０開始數一直到１１)

 

//var endTime = new Date();//（2017,11,23,23,12,52）如果在這個括弧裡面填上數字，前面的ｖａｒ改成ｃｏｎｓｔ就是填寫的時間到當前時間的差的倒計時，最多只能有９９個小時，

 

//endTime.setTime( endTime.getTime()+3600*1000);//這種演算法可以保證每次打開時都是倒計時一小時（１小時＝６０分鐘＝３６００秒＝３６００*１０００毫秒）

 

//小時的位置只有兩位數，一天有２４個小時，最多只能倒計時四天，

 

//如果需要打破這個限制，可以把小時擴充成三位數，甚至增加

 

 

 

//因為倒計時每一秒的變化，要加上動畫的效果，動畫的效果要不停的和當前的時間

 

//做一個比較，為此設計一個全局變數來表示現在倒計時需要有多少秒，毫秒在計算中

 

//要轉換成秒，毫秒的細節是不需要的。

 

var curShowTimeSeconds = 0; //初始化

 

 

 

//為了儲存生成的小球，要設一個數據結構，

 

var balls = []; //初始化一個空的數組,一旦產生新的小球，就添加在數組裡面

 

 

 

//小球是彩色的，需要一個儲存顏色的數組

 

const colors = ["red", "yellow", "lime", "purple", "deeppink",

 

"springgreen", "blue", "green", "tomato", "turquoise"

 

]

 

 

 

window.onload = function() {

 

//實現屏幕的自適應

 

WINDOW_WIDTH = document.body.clientWidth;

 

WINDOW_HEIGHT = document.body.clientHeight;

 

 

 

MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);

 

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

 

MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);

 

 

 

var canvas = document.getElementById('canvas');

 

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

 

 

 

//這種方式調用寬高，有兩個好處

 

//第一屏幕的大小改變起來非常的方便

 

//第二個後續在做屏幕的自適應的時候，只需要計算兩個變數的值，非常的方便

 

canvas.width = WINDOW_WIDTH;

 

canvas.height = WINDOW_HEIGHT;

 

//調用render函數，傳入context參數，獲得繪圖的上下文環境

 

 

 

curShowTimeSeconds = getCurrentShowTimeSeconds();

 

setInterval(function() {

 

render(context); //繪製當前的畫面

 

update(); //根據繪製畫面所需要的數據結構，對數據結構進行一定的調整

 

}, 50);

 

 

 

}

 

 

 

function getCurrentShowTimeSeconds() {

 

var curTime = new Date(); //獲取當前的時間

 

 

 

 

 

var ret = curTime.getHours()*3600+ curTime.getMinutes()*60+curTime.getSeconds();

 

 

 

return ret ; 

 

}

 

 

 

//對當前的數據進行調整，處理時間的變化

 

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;

 

 

 

//判斷下一次要顯示的時間和當前所顯示的時間有沒有變化，

 

//如果有變化，就改變curShowTimeSeconds

 

if(nextSeconds != curSeconds) {

 

//如果當前的小時的十位數已經不等於下一次要顯示的小時的十位數

 

if(parseInt(curHours / 10) != parseInt(nextHours / 10)) {

 

//創建一個新的函數addBalls負責加小球，找到小球的位置，以及相應的數字，生成一系列小球

 

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(nextSeconds % 10));

 

}

 

 

 

curShowTimeSeconds = nextShowTimeSeconds;

 

}

 

 

 

updateBalls();

 

//數組的元素在不斷的增加，但是沒有減小，這樣的程式是不能長時間運行的，

 

//每個電腦都有它的極限，，他在不斷的占有我們的記憶體，其實當balls走出我們的畫面的時候

 

//這個小球就可以不留在數組裡了，設置一個機制，刪除走出畫面的數組，這個程式就可以長時間運行了

 

// console.log(balls.length);//列印balls數組的長度

 

 

 

}

 

//讓新產生的小球動起來

 

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

 

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

 

}

 

 

 

}

 

 

 

//實現addBalls（）

 

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, //小球在ｘ方向的速度

 

vy: -5, //ｙ方向的速度

 

color: colors[Math.floor(Math.random() * colors.length)]

 

 

 

}

 

balls.push(aBall);

 

}

 

}

 

 

 

//繪製canvas的畫布

 

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)

 

//15=7*2+1

 

renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)

 

//30=15+15

 

renderDigit(MARGIN_LEFT + 3

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 用JavaScript來實現鏈表LinkedList
    本文版權歸博客園和作者本人共同所有，轉載和爬蟲請註明原文地址。 寫在前面 好多做web開發的朋友，在學習數據結構和演算法時可能比較討厭C和C++，上學的時候寫過的也忘得差不多了，更別提沒寫過的了。但幸運的是，你會JavaScript啊。我想說學好數據結構和基本演算法並非是要我們必須要去書寫，演算法的工作有 ...
  • JS控制div跳轉到指定的位置的解決方案總結
    總結一下自己在寫這個需求遇到的問題，相信大家應該是經常遇到的。即要求滾輪滾動到指定的位置。先看下基本的解決方案。 1.給鏈接a加個#的方式來實現跳轉。（錨點方法）這裡直接貼下代碼: html頁面： css樣式： 該錨點法，不需要任何的js代碼，即可實現跳轉的方法。缺點：點擊鏈接url發生變化，刷新的 ...
  • Redux介紹及基本應用
    一、Redux介紹 Redux的設計思想很簡單，就兩句話： 二、Redux基本概念和API Store Store就是保存數據(state)的地方，整個應用只能有一個Store。Redux通過createStore來生成store。 State Store對象包含所有State，某一時刻的數據集合就 ...
  • 結合WebSocket編寫WebGL綜合場景示例
    在WebGL場景中導入多個Babylon骨骼模型，在區域網用WebSocket實現多用戶交互控制。 ...
  • css3 transition animation nick
    時光轉眼即逝，又到周六了，今天寫點某部分人看不起的css玩玩！ 轉換 轉換屬性transform: 瀏覽器首碼: -webkit-transform;-o-transform;-moz-transform;-ms-transform; 取值： none : 預設值，沒有轉換操作 transform- ...
  • jQuery_02之元素操作及事件綁定
    1、操作元素之屬性： ①attr讀：$(“selector”).attr(“屬性名”)；=>getAttribute(“屬性名”)；改：$(“selector”).attr(“屬性名”，值)；=>setAttribute(“屬性名”，值)；*（*無法訪問不再開始標簽中存在的prop屬性；例：chec ...
  • sort()函數到底是怎樣進行數字排序的
    很多人會用sort()，並不見得知道它具體是怎樣給數字排序的。其實不知道也行，會用就可以，感興趣的可以來看看。 用過sort()函數的都知道上面代碼其實就是將數組裡的元素從小到大排序，返回結果[1,2,3,4]。 為了弄清楚sort()是怎樣進行數字比較和移動，最後排好序的，我加三行代碼，讓它把每一 ...
  • 寫一個事件封裝函數
    var EventHandle = { addEvent:function(ele,type,handle){ if (ele.addEventListener) { ele.addEventListener(type,handle,false); }else if(attachEvent){ el ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類