日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Canvas画钟 js

發(fā)布時(shí)間：2024/3/12 编程问答 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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部分：

(function(){
/*
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，請換成下面的瀏覽器試試：</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為弧度算法.請參考數(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。