Canvas画钟 js
生活随笔
收集整理的這篇文章主要介紹了
Canvas画钟 js
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
用Canvas模擬了webQQ里頭的那個(gè)鐘。下圖左側(cè)是webQQ的原版，右側(cè)是畫出來的。效果預(yù)覽
畫的過程中都還比較順利，只是最里邊的那個(gè)小圓頂部有一點(diǎn)點(diǎn)小漸變，花了不少功夫?。
用得比較多的是旋轉(zhuǎn)部分的代碼，得先存之前的位置，然后再旋轉(zhuǎn)，再恢復(fù)到原來的屬性繼續(xù)往下畫。
HTML部分：
<!DOCTYPE HTML><html>
<head>
<meta chaset="utf-8" />
<title>Canvas Clock</title>
<style>
a{color:#333;margin:0 10px;font-size:24px;}
.ts{width:850px;text-align:center; height:100px;position:absolute;left:50%;top:50%;margin-top:-55px;margin-left:-405px;border:1px dotted #778855;background:#F5F5F5;padding:10px;}</style>
</head>
<body>
</body>
</html>
JS部分：
/*
Author:Jin.dh
Date:2012/3/5
*/
function isIE(){
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
var IE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera ;
return IE;
};
var box = {
w:150,
h:150,
b:"#ccc"
};
var clockAttr ={
x:75,
r:75,
y:75
};
//創(chuàng)建容器
function $C(tag,father){
var o = document.createElement(tag||"div");
father = father || document.body;
father.appendChild(o);
return o;
};
//計(jì)時(shí)器
var autoId = null;
//初始化
function init(){
if(isIE()){
var tsHTML = "<div class='ts'><h1 style='color:#f00'>您的瀏覽器暫不支持本Demo，請(qǐng)換成下面的瀏覽器試試：</h1>";
tsHTML+=" <a href='http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html' target='_blank'>chrome</a><a href='http://www.firefox.com.cn/download/' target='blank'>firefox</a><a href='http://www.opera.com/' target='_blank'>opera</a><a href='http://www.apple.com.cn/safari/' target='_blank'>safari</a></div>";
document.body.innerHTML = tsHTML;
return false;
};
canvas = $C("canvas");
canvas.width = box.w;
canvas.height = box.h;
ctx = canvas.getContext("2d");
go();//開始
};
function go(){
autoId = setTimeout(function(){
drew();
go();
},1000);
}
//畫鐘
function drew(){
ctx.clearRect(0,0,box.w,box.h)
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
var rGrd =ctx.createRadialGradient(clockAttr.r, clockAttr.r, clockAttr.r-20, clockAttr.r, clockAttr.r, clockAttr.r); //創(chuàng)建線形漸變
rGrd.addColorStop(1, '#343537'); //最外邊的顏色
rGrd.addColorStop(0.2,'#424242'); //靠近內(nèi)層顏色
rGrd.addColorStop(0, '#fff'); //內(nèi)圓
ctx.beginPath();
ctx.arc(clockAttr.x,clockAttr.y,clockAttr.r,0,Math.PI*2,true);
ctx.fillStyle = rGrd;
ctx.fill();
ctx.closePath();
ctx.save();//存Canvas原坐標(biāo)
ctx.translate(clockAttr.r,clockAttr.r);//移動(dòng)坐標(biāo)
ctx.strokeStyle = "#ccc";
for(var i =0;i<12;i++){
ctx.beginPath();
ctx.moveTo(0,-clockAttr.r+20); //始點(diǎn)
ctx.lineTo(0,-clockAttr.r+26); //終點(diǎn)
ctx.lineWidth = 1; //線寬
if(i%3===0){ //如果是3/6/9/12則加粗線條,顏色加深
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
};
ctx.stroke();
ctx.closePath();
ctx.rotate(360/12*Math.PI/180); //旋轉(zhuǎn)畫布
};
ctx.restore();
//時(shí)針
ctx.save();//存Canvas原坐標(biāo)
ctx.translate(clockAttr.r,clockAttr.r);//移動(dòng)坐標(biāo)
ctx.lineWidth = 8;
//Math.PI/180為弧度算法.請(qǐng)參考數(shù)學(xué)“弧度”算法。
ctx.rotate((h*60+m)*(360/(12*60))*Math.PI/180); //弧度=當(dāng)前分 * 每分多少度
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-30);
ctx.stroke();
ctx.closePath();
ctx.restore();
//分針
ctx.save();//存Canvas原坐標(biāo)
ctx.translate(clockAttr.r,clockAttr.r);//移動(dòng)坐標(biāo)
ctx.rotate((m*60+s)*(360/(60*60))*Math.PI/180); //弧度=當(dāng)前秒 * 每秒多少度
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-42);
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
ctx.restore();
//秒針
ctx.save();//存Canvas原坐標(biāo)
ctx.translate(clockAttr.r,clockAttr.r);//移動(dòng)坐標(biāo)
ctx.lineWidth = 3;
ctx.rotate(s*(360/60)*Math.PI/180);//弧度=當(dāng)前秒 * 每秒多少度
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-45);
ctx.stroke();
ctx.closePath();
ctx.restore();
//中心圓點(diǎn)
ctx.beginPath();
ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);
ctx.fillStyle = "#424242";
ctx.fill();
ctx.closePath();
ctx.beginPath();
var linear = ctx.createLinearGradient(clockAttr.x-10,clockAttr.y-10,clockAttr.x-10,clockAttr.y-8);
linear.addColorStop(0,"#ffffff");
linear.addColorStop(1,"#424242");
ctx.arc(clockAttr.x,clockAttr.y,10,0,2*Math.PI,true);
ctx.fillStyle = linear;
ctx.fill();
ctx.closePath();
};
//window onlaod
function addLoad(fn){
var old = window.onload;
if(typeof old == "function"){
window.onload = function(){
fn();
old();
}
}else{
window.onload = fn;
}
};
addLoad(init);//初始化
})();
轉(zhuǎn)載于:https://www.cnblogs.com/webstarting/archive/2012/03/05/2380540.html
總結(jié)
以上是生活随笔為你收集整理的Canvas画钟 js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 树莓派4B 声音传感器DO模块
- 下一篇： K8s---HPA弹性伸缩