效果演示
簡介
十二小時制的時鐘，時刻度在圓盤上面顯示，交叉線頂角為分和秒的刻度，
時分秒：最小的是秒、中等的是分、圈內的藍點為時，
中心圓：隨著秒鐘縮小，數字時鐘的顯示，
秒鐘走動的聲音，每小時和每3小時的有語音提示，
代碼
html
<canvas id="can" width="860px" height="860px">
</canvas>
<!-- 音樂 -->
<audio src="./audio/7987.mp3" id="aud" loop="loop" ></audio>
css
<style type="text/css">
body{text-align: center;background-color: black}
</style>
js代碼配合js功能函式使用
// 獲取聲音
var aud = document.getElementById('aud');
// 點擊開啟聲音
document.addEventListener('click',startTime)
function startTime(){
aud.play();
document.removeEventListener('click',startTime);// 開啟聲音后解綁事件
}
// 解決時間晚一秒的問題
window.onload = function(){
clock();
}
// 獲取畫布
var can = document.getElementById('can');
// 獲取畫筆
var cx = can.getContext('2d');
cx.translate(420,420);// 設定中心點 默認值
setInterval(clock,1000);// 開始時間
var zgongxinyuan = 246;// 控制中心圓的大小
function clock(){
zgongxinyuan -=1;
// 獲取當前時間物件
var today = new Date();
var hour = today.getHours();//時
var min = today.getMinutes();//分
var secd = today.getSeconds();//秒
if(secd==0){
zgongxinyuan = 246;// 中心圓的半徑
}
// 清除繪畫區
cx.clearRect(-420,-420,860,860);
cx.beginPath();
cx.arc(0,0,395,0,Math.PI*2,true);
cx.strokeStyle = 'rgba(0,100,100,.4)';
cx.lineWidth = '10';
cx.stroke();
cx.closePath();
// 分刻度
for(var i=0;i<60;i++){
calibration(60,6,-388);// 網格線
}
// 時刻度
for(var i=0;i<12;i++){
calibration(12,30,-396)
}
// 時間繪制
hour = hour+min/60;// 小時數里面包含的分鐘的小數數
hour>12 ?hour =hour-12:hour;// 將24小時制轉為12小時制
// 每小時提醒一次
console.log(secd,min)
if(min==0 && secd==0 && hour% 3!=0 ){
playAudio('audio/2341.mp3',1000)
}
// 整點提示3、6、9、12提示
// console.log(secd,min)
if( (hour%3==0)&& min==0 && secd==0){
playAudio('audio/7120.mp3',2000)
}
// 時針
hand(hour,30,-260,12)
// 分鐘
hand(min,6,-356,8)
// 秒針
// hand(secd,6,-300,'red')
cx.save();// 保存之前的
cx.beginPath();
cx.rotate(secd*6*Math.PI/180);
// line(0,0,0,-300,'red','1','round')
cx.closePath();
// 中心圓
circle(0,zgongxinyuan,'rgba(0,100,100,.2)');
// 秒針圓
if(secd%5==0){
circle(-396,18,'#999');
}else{
circle(-384,4,'#ccc');
}
cx.restore();// 恢復
// 小時文字填充
cx.beginPath();// 開始路徑
cx.fillStyle = '#fff';
cx.font = '20px 宋體'
cx.fillText('12',-10,-390)
cx.fillText('1',194,-336)
cx.fillText('2',339,-190)
cx.fillText('3',392,8)
cx.fillText('4',338,204)
cx.fillText('5',193,352)
cx.fillText('6',-4,404)
cx.fillText('7',-202,350)
cx.fillText('8',-348,204)
cx.fillText('9',-401,6)
cx.fillText('10',-353,-190)
cx.fillText('11',-208,-336)
cx.closePath()
// 繪制作者
cx.beginPath();
cx.strokeStyle = 'white';
cx.font = '28px 宋體';
cx.lineWidth = '1'
cx.fillStyle = 'rgba(0,100,100,1)';
cx.strokeText('xxxxx Made',-140,90);
cx.fillText('xxxxx Made',-140,90)
cx.closePath();
// 繪制數字時鐘
cx.beginPath();
// cx.strokeStyle = 'white';
cx.font = '38px 宋體';
cx.lineWidth = '1'
var bgr = cx.createLinearGradient(-20,-100,-10,-10);//設定顏色漸變
bgr.addColorStop(0.1,'rgba(0,100,100,1)');
bgr.addColorStop(0.5,'rgba(0,100,100,.2)');
bgr.addColorStop(1,'rgba(0,100,100,1)');
cx.fillStyle = bgr;
var numTime = `${zero(today.getHours())}:${zero(min)}:${zero(secd)}`
cx.strokeText(numTime,-80,-20);
cx.fillText(numTime,-80,-20)
cx.closePath();
}
js功能函式：繪制形狀比較頻繁的函式封裝
// 切換語音提示
// srcValue 檔案路徑
// srcValue 播放時間
function playAudio(srcValue,time){
aud.src = srcValue;
// $('#aud').attr('src',srcValue);// 新的音樂播放
aud.play();
setTimeout(function(){
// 'audio/7987.mp3'為本地存盤的秒鐘時間聲音-----可以自定義
aud.src = 'audio/7987.mp3';// time 秒后回到原來的音樂
aud.play();
},time)
}
// 5.封裝一個直線的函式
// x1,y1開始坐標
// x2,y2;結束坐標
// color線條顏色
// width線條大小
// shape線條樣式
function line(x1,y1,x2,y2,color,width,shape){
color = color || '#000';
width = width || 'butt';
shape = shape || 'butt';
cx.save()
cx.beginPath();// 開始路徑
cx.moveTo(x1,y1);// 起點
cx.lineTo(x2,y2); // 終點
cx.strokeStyle = color;// 設定顏色
cx.lineWidth = width; // 設定大小
cx.lineCap = shape;// 兩端的狀態值是 round圓角、butt、square
cx.stroke(); // 繪制
cx.closePath();// 結束路徑
cx.restore();
}
// 封裝一個繪制刻度的函式
// num 刻度個數 ---數字
// deg 表示旋轉的度數
// y1 終點坐標
function calibration(num,deg,y1){
for(var i=num;i>0;i--){
cx.save();//保存
cx.beginPath();
cx.strokeStyle = 'seagreen';
cx.rotate(i*deg*Math.PI/180);
if(num==12){
circle(y1,18,'rgba(10,10,0,.4)',2);
}else{
line(y1,0,0,y1,'rgba(0,100,100,.4)',1);
}
cx.closePath();// 關閉路徑
cx.restore();// 恢復
}
}
// 封裝時鐘分鐘的函式
// time表示時間 -- 資料型別-變數
// deg表示度數 -- 數字
// y2 結束位置 -- 數字
// r 半徑
function hand(time,deg,y2,r){
cx.save();// 保存之前的
cx.beginPath();
cx.rotate(time*deg*Math.PI/180);
// line(0,0,0,y2,color,'10','round')
if(deg==6){// 如果時分鐘
circle(y2,r,'#84AFD9',4);// 時針和分針的圓
}else{
circle(y2,r,'#39DEFA',4);// 時針和分針的圓
}
cx.closePath();
cx.restore();// 恢復
}
// 圓形繪制函式
// y1 yz坐標位置
// r 半徑
// color填充色
// width畫筆大小
function circle(y1,r,color,width){
// 秒針圓
cx.beginPath();// 開始路徑
cx.strokeStyle = 'rgba(10,100,100,.4)';
cx.lineWidth = '4';
cx.arc(0,y1,r,0,Math.PI*2,true);// 中心點
cx.fillStyle = color;
cx.fill();
cx.stroke(); // 繪制
cx.closePath();// 結束路徑
}
// 去0補位
function zero(num){
return num<10? '0'+num : num;
}
音頻檔案路徑設定需要自己引入檔案
audio標簽默認是秒鐘的聲音，可以自己設定，
每小時語音提示代碼修改路徑和提示時間
// 每小時提醒一次
console.log(secd,min)
if(min==0 && secd==0 && hour% 3!=0 ){
playAudio('audio/2341.mp3',1000)
}
// 整點提示3、6、9、12提示
// console.log(secd,min)
if( (hour%3==0)&& min==0 && secd==0){
playAudio('audio/7120.mp3',2000)
}
音頻開啟
需要點擊一下任意位置開始或者等小時提示的資訊結束后，才能播放，試了好多種方式開啟音頻，最后點擊一下任意位置開啟是最穩定的，有更好的方式希望大家多分享分享，
// 點擊開啟聲音
document.addEventListener('click',startTime)
function startTime(){
aud.play();
document.removeEventListener('click',startTime);// 開啟聲音后解綁事件
}
canvas使用分享
剛使用canvas的時候，對于我來說找坐標點有點暈，尤其是使用 translate() 重新設定中心點之后更暈了，
找坐標
通過 offsetX,offsetY獲取滑鼠在元素（canvas）的位置，將值直接輸出到頁面中就能得到一個大致的值，如果從新設定了中心點，需要把設定中心點的位置也算進去，
// 滑鼠在畫布上的位置
var x = document.getElementById('x');
var y = document.getElementById('y');
document.onmousemove = function(e){
x.innerHTML ='x坐標：'+ e.offsetX;
y.innerHTML ='y坐標：'+ e.offsetY;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282737.html
標籤：其他
上一篇：沈陽資格賽賽后補題