JS+Canvas實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
更新時(shí)間：2021年10月12日 11:08:17 作者：javscp_q
這篇文章主要為大家詳細(xì)介紹了JS+Canvas實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
基于Canvas制作的動(dòng)態(tài)時(shí)鐘demo，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)態(tài)時(shí)鐘</title>
<script type="text/javascript" src="js/lattice.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#canvasBox{
border-width: 2px;
border-color: black;
border-style: solid;
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 將canvas放到一個(gè)盒子中，用盒子控制canvas的位置 -->
<div id="canvasBox">
<canvas id="canvas">
此瀏覽器不支持canvas
</canvas>
</div>
</body>
</html>
lattice.js
lattice =
[
[
[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]
]//:
];
script.js
var CANVAS_WIDTH;
var CANVAS_HEIGHT = 600;
//設(shè)置點(diǎn)陣中圓的半徑
var RADIUS = 8;
//設(shè)置時(shí)鐘距離邊框的位置
var MARGIN_LEFT = 100;
var MARGIN_TOP = 40;
//獲取初始狀態(tài)的時(shí)間
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
//用于存儲(chǔ)小球?qū)ο?
var balls = [];
//小球顏色
var colors = ["red","orenge","yellow","green","blue","purple","pink"]
window.onload = function(){
//獲得canvas外部盒子的寬度，使canvas與外部盒子寬度相同
var canvasBox = document.getElementById("canvasBox");
var boxWidth = getComputedStyle(canvasBox,null);
CANVAS_WIDTH = parseInt(boxWidth.width);
//設(shè)置canvas寬高并獲得畫筆對(duì)象
var canvas = document.getElementById("canvas");
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
var context = canvas.getContext("2d");
//定時(shí)調(diào)用，50毫秒調(diào)用一次
setInterval(function(){
//繪制函數(shù)
draw(context);
},50);
function draw(ctx){
//刷新屏幕
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
//獲取當(dāng)前時(shí)間
var curTime = new Date();
var curHours = curTime.getHours();
var curMinutes = curTime.getMinutes();
var curSeconds = curTime.getSeconds();
//畫小時(shí)
drawLattice(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10),ctx);
drawLattice(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10),ctx);
//畫冒號(hào)
drawLattice(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
//畫分鐘
drawLattice(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10),ctx);
drawLattice(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10),ctx);
//畫冒號(hào)
drawLattice(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
//畫秒
drawLattice(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10),ctx);
drawLattice(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10),ctx);
//更新時(shí)間并繪制小球
update(context,curHours,curMinutes,curSeconds);
//觀察小球數(shù)量
//console.log(balls.length);
}
//參數(shù)：
//x：繪制數(shù)字點(diǎn)陣的左上角的橫坐標(biāo)
//y：繪制數(shù)字點(diǎn)陣的左上角的縱坐標(biāo)
//num：要繪制的數(shù)字，實(shí)際上是lattice的索引，10表示冒號(hào)
//ctx：畫筆
function drawLattice(x,y,num,ctx){
for(var i=0;i<lattice[num].length;i++){
for(var j=0;j<lattice[num][i].length;j++){
if(lattice[num][i][j]==1){
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
ctx.fill();
ctx.closePath();
}
}
}
}
//更新時(shí)間并繪制小球
function update(ctx,curHours,curMinutes,curSeconds){
if(seconds!=curSeconds){
//更新小時(shí)
if(parseInt(curHours/10)!=parseInt(hours/10)){
addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));
}
if(parseInt(curHours%10)!=parseInt(hours%10)){
addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
}
//更新分鐘
if(parseInt(curMinutes/10)!=parseInt(minutes/10)){
addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10)!=parseInt(minutes%10)){
addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
}
//更新秒
if(parseInt(curSeconds/10)!=parseInt(seconds/10)){
addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10)!=parseInt(seconds%10)){
addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
}
//更新所有時(shí)間
hours = curHours;
minutes = curMinutes;
seconds = curSeconds;
}
//繪制小球
drawBalls(ctx);
//更新小球運(yùn)動(dòng)
updateBalls();
}
//添加單個(gè)小球
//參數(shù)：
//x：小球的橫坐標(biāo)
//y：小球的縱坐標(biāo)
//num：變化的時(shí)間數(shù)字
function addBalls(x,y,num){
for(var i=0;i<lattice[num].length;i++){
for(var j=0;j<lattice[num][i].length;j++){
if(lattice[num][i][j]==1){
//添加一個(gè)小球?qū)ο?
var ball = {
//坐標(biāo)
x:x+j*2*(RADIUS+1)+(RADIUS+1),
y:y+i*2*(RADIUS+1)+(RADIUS+1),
//重力加速度
g:1.5+Math.random(),
//x、y方向的速度
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*5,
vy:-5,
//小球顏色
color:colors[Math.floor(Math.random()*colors.length)]
}
//將小球添加進(jìn)儲(chǔ)存隊(duì)列中
balls.push(ball);
}
}
}
}
//繪制小球
function drawBalls(ctx){
for(var i=0;i<balls.length;i++){
ctx.beginPath();
ctx.fillStyle = balls[i].color;
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
ctx.fill();
ctx.closePath();
}
}
//更新小球運(yùn)動(dòng)
function updateBalls(){
//更新儲(chǔ)存數(shù)組中的小球的動(dòng)態(tài)
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;
//邊緣碰撞檢測(cè)
if(balls[i].y>=CANVAS_HEIGHT-RADIUS){
balls[i].y=CANVAS_HEIGHT-RADIUS;
//模擬碰撞反彈和阻力
balls[i].vy=-balls[i].vy*0.6;
}
}
//當(dāng)小球滾出畫布便可以從數(shù)組中刪除，以下是刪除算法
//儲(chǔ)存應(yīng)當(dāng)保留的小球的數(shù)量
var numBall = 0;
for(var i=0;i<balls.length;i++){
if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<CANVAS_WIDTH){
//若判斷當(dāng)前小球在屏幕內(nèi)，則將此小球盡量靠前，則每次循環(huán)后，數(shù)組最后面的小球就是滾出畫布的小球
balls[numBall] = balls[i];
numBall++;
}
}
//從數(shù)組后面刪除小球
while(balls.length>numBall){
balls.pop();
}
}
};
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript圖片處理與合成的相關(guān)知識(shí)點(diǎn)以及相關(guān)實(shí)例代碼分析，有興趣的朋友學(xué)習(xí)下。2018-03-03
javascript中Promise的三種狀態(tài)示例詳解
這篇文章主要給大家通過講解和實(shí)踐,詳細(xì)介紹了Promise對(duì)象的三種狀態(tài)：pending（待定）、fullfilled（已兌現(xiàn)）、rejected（已拒絕）,并通過日志查看,展示了Promise狀態(tài)的改變順序,幫助讀者更好的理解和應(yīng)用Promise,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了JS快速掌握ES6的class用法，想了解ES6的同學(xué)，一定要看一下2021-05-05
本文是對(duì)js中頁面元素的幾個(gè)用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以 過來參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了TypeScript 泛型的使用，在JavaScript中，封裝一個(gè)API可以具有多種用途，因?yàn)槠鋵?shí)弱類型語言，但是就因?yàn)槭侨躅愋涂梢宰罱K得到的結(jié)果并不是我們想要的，下面我們就來看看具體TypeScript 泛型的使用吧2021-12-12
微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能示例
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能,結(jié)合具體實(shí)例形式分析了微信小程序基于map組件的地理位置獲取、路徑規(guī)劃等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jQuery判斷密碼強(qiáng)度實(shí)現(xiàn)思路及代碼
實(shí)現(xiàn)思路為：密碼小于六位的時(shí)候，密碼強(qiáng)度圖片都為灰色;密碼為七位及以上并且字母、數(shù)字、特殊字符三項(xiàng)中有兩項(xiàng)，強(qiáng)度等等，感興趣的朋友可以參考下哈2013-04-04
JavaScript實(shí)現(xiàn)cookie的寫入、讀取、刪除功能
cookie 是存在有效期的，在默認(rèn)情況下，一個(gè) cookie 的生命周期就是在瀏覽器關(guān)閉的時(shí)候結(jié)束，本文給大家介紹關(guān)于javascript對(duì)于cookie的簡(jiǎn)單操作，比如對(duì)于cookie的寫入和刪除，代碼簡(jiǎn)單易懂，需要的朋友參考下2015-11-11
項(xiàng)目實(shí)踐之javascript技巧...2007-12-12
這篇文章主要介紹了JavaScript異步forEach的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07