canvas時(shí)鐘效果
更新時(shí)間：2017年02月16日 08:36:09 作者：59580
本文主要介紹了canvas實(shí)現(xiàn)時(shí)鐘效果的代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas時(shí)鐘</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script>
window.onload = function(){
var WINDOW_WIDTH = document.body.scrollWidth;
var WINDOW_HEIGHT = document.body.scrollHeight-10;
var RADIUS = 7; //球半徑
var NUMBER_GAP = 10; //數(shù)字之間的間隙
var u = 0.65; //碰撞能量損耗系數(shù)
var context; //Canvas繪制上下文
var balls = []; //存儲(chǔ)彩色的小球
const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]; //彩色小球的顏色
var currentNums = []; //屏幕顯示的8個(gè)字符
var 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]
] //:
];
function drawDatetime(cxt) {
var nums = [];
var date = new Date();
var hours = date.getHours();
var num1 = Math.floor(hours / 10);
var num2 = hours % 10;
context.fillStyle = colors[(date.getSeconds()%10)];
var offsetX = WINDOW_WIDTH/4,
offsetY = 30;
nums.push({
num: num1
});
nums.push({
num: num2
});
nums.push({
num: 10
}); //冒號(hào)
var minutes = date.getMinutes();
var num1 = Math.floor(minutes / 10);
var num2 = minutes % 10;
nums.push({
num: num1
});
nums.push({
num: num2
});
nums.push({
num: 10
}); //冒號(hào)
var seconds = date.getSeconds();
var num1 = Math.floor(seconds / 10);
var num2 = seconds % 10;
nums.push({
num: num1
});
nums.push({
num: num2
});
for(var x = 0; x < nums.length; x++) {
nums[x].offsetX = offsetX;
offsetX = drawSingleNumber(offsetX, offsetY, nums[x].num, cxt);
//兩個(gè)數(shù)字連一塊，應(yīng)該間隔一些距離
if(x < nums.length - 1) {
if((nums[x].num != 10) && (nums[x + 1].num != 10)) {
offsetX += NUMBER_GAP;
}
}
}
//說(shuō)明這是初始化
if(currentNums.length == 0) {
currentNums = nums;
} else {
//進(jìn)行比較
for(var index = 0; index < currentNums.length; index++) {
if(currentNums[index].num != nums[index].num) {
//不一樣時(shí)，添加彩色小球
addBalls(nums[index]);
currentNums[index].num = nums[index].num;
}
}
}
renderBalls(cxt);
updateBalls();
return date;
}
function addBalls(item) {
var num = item.num;
var numMatrix = digit[num];
for(var y = 0; y < numMatrix.length; y++) {
for(var x = 0; x < numMatrix[y].length; x++) {
if(numMatrix[y][x] == 1) {
var ball = {
offsetX: item.offsetX + RADIUS + RADIUS * 2 * x,
offsetY: 30 + RADIUS + RADIUS * 2 * y,
color: colors[Math.floor(Math.random() * colors.length)],
g: 1.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(),
vy: -5
}
balls.push(ball);
}
}
}
}
function renderBalls(cxt) {
for(var index = 0; index < balls.length; index++) {
cxt.beginPath();
cxt.fillStyle = balls[index].color;
cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2 * Math.PI);
cxt.fill();
}
}
function updateBalls() {
var i = 0;
for(var index = 0; index < balls.length; index++) {
var ball = balls[index];
ball.offsetX += ball.vx;
ball.offsetY += ball.vy;
ball.vy += ball.g;
if(ball.offsetY > (WINDOW_HEIGHT - RADIUS)) {
ball.offsetY = WINDOW_HEIGHT - RADIUS;
ball.vy = -ball.vy * u;
}
if(ball.offsetX > RADIUS && ball.offsetX < (WINDOW_WIDTH - RADIUS)) {
balls[i] = balls[index];
i++;
}
}
//去除出邊界的球
for(; i < balls.length; i++) {
balls.pop();
}
}
function drawSingleNumber(offsetX, offsetY, num, cxt) {
var numMatrix = digit[num];
for(var y = 0; y < numMatrix.length; y++) {
for(var x = 0; x < numMatrix[y].length; x++) {
if(numMatrix[y][x] == 1) {
cxt.beginPath();
cxt.arc(offsetX + RADIUS + RADIUS * 2 * x, offsetY + RADIUS + RADIUS * 2 * y, RADIUS, 0, 2 * Math.PI);
cxt.fill();
}
}
}
cxt.beginPath();
offsetX += numMatrix[0].length * RADIUS * 2;
return offsetX;
}
var canvas = document.getElementById("canvas");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
context = canvas.getContext("2d");
//記錄當(dāng)前繪制的時(shí)刻
var currentDate = new Date();
setInterval(function() {
//清空整個(gè)Canvas，重新繪制內(nèi)容
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
drawDatetime(context);
}, 50)
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- canvas實(shí)現(xiàn)粒子時(shí)鐘效果
- canvas繪制表盤(pán)時(shí)鐘
- js Canvas實(shí)現(xiàn)的日歷時(shí)鐘案例分享
- js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程
- JavaScript學(xué)習(xí)小結(jié)之使用canvas畫(huà)“哆啦A夢(mèng)”時(shí)鐘
- JS+Canvas繪制時(shí)鐘效果
- js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁(yè)時(shí)鐘的方法
- JavaScript html5 canvas繪制時(shí)鐘效果(二)
- javascript結(jié)合Canvas 實(shí)現(xiàn)簡(jiǎn)易的圓形時(shí)鐘
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
相關(guān)文章
JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼
這篇文章主要介紹了JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼,通過(guò)示例代碼介紹了JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換問(wèn)題,感興趣的朋友一起看看吧2024-01-01
用js寫(xiě)一段小程序，但是又覺(jué)得使用瀏覽器去運(yùn)行挺麻煩的，下面為大家介紹下如何使用java程序調(diào)用javascript程序，有類(lèi)似需求的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
這篇文章主要介紹了JS提交form表單的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了頁(yè)面加載時(shí)提交表單及通過(guò)鏈接提交表單的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
JavaScript引用類(lèi)型Array實(shí)例分析
這篇文章主要介紹了JavaScript引用類(lèi)型Array,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript數(shù)組相關(guān)的創(chuàng)建、檢測(cè)、轉(zhuǎn)換、排序、棧、隊(duì)列、引用等各種常見(jiàn)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要是對(duì)javascript中文本框中輸入法切換的問(wèn)題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JS取request值以及自動(dòng)執(zhí)行使用示例
在網(wǎng)頁(yè)中JS函數(shù)自動(dòng)執(zhí)行常用三種方法，下面為大家詳細(xì)介紹下JS取request值以及自動(dòng)執(zhí)行使用,需要的朋友可以參考下2014-02-02
使用 UniApp 實(shí)現(xiàn)小程序的微信登錄功能
這篇文章主要介紹了使用 UniApp 實(shí)現(xiàn)小程序的微信登錄功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼
本文主要介紹了React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Draggable Elements 元素拖拽功能實(shí)現(xiàn)代碼
雖說(shuō)js框架到處都是, 都封裝了很多實(shí)用的功能,能快速的讓我們實(shí)現(xiàn)如動(dòng)畫(huà),元素拖拽等功能, 不過(guò)由于好奇心的驅(qū)使, 有時(shí)想一探究竟, 看看一些功能是如何實(shí)現(xiàn)的2011-03-03
這篇文章主要介紹了js如何引入wasm文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04