js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁(yè)時(shí)鐘的方法
更新時(shí)間：2021年10月12日 11:06:37 作者：tcxu
這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁(yè)時(shí)鐘的方法,涉及html5圖形繪制的基礎(chǔ)技巧，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例講述了js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁(yè)時(shí)鐘的方法，畫的是一個(gè)可用于網(wǎng)頁(yè)的、帶擺的鐘表，可以通過按鈕調(diào)整其大小和位置，具體實(shí)現(xiàn)內(nèi)容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clock</title>
<script type="text/javascript">
var xClock=300; //表心位置
var yClock=250; //表心位置
var d=180.0;//鐘表圓面的半徑
var value = -d*1.07;
function enlarge(){
d++;
}
function reduce(){
d--;
}
function westwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
g2d.translate(-1,0); //置坐標(biāo)軸原點(diǎn)于表心
c=document.getElementById("myPendulum");
g2d=c.getContext("2d");
g2d.translate(-1,0); //置坐標(biāo)軸原點(diǎn)于表心
}
function eastwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
g2d.translate(1,0); //置坐標(biāo)軸原點(diǎn)于表心
c=document.getElementById("myPendulum");
g2d=c.getContext("2d");
g2d.translate(1,0); //置坐標(biāo)軸原點(diǎn)于表心
}
function upwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
g2d.translate(0,-1); //置坐標(biāo)軸原點(diǎn)于表心
c=document.getElementById("myPendulum");
g2d=c.getContext("2d");
g2d.translate(0,-1); //置坐標(biāo)軸原點(diǎn)于表心
}
function downwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
g2d.translate(0,1); //置坐標(biāo)軸原點(diǎn)于表心
c=document.getElementById("myPendulum");
g2d=c.getContext("2d");
g2d.translate(0,1); //置坐標(biāo)軸原點(diǎn)于表心
}
function fillPolygon( a, b, fillColor, ctx){
ctx.beginPath();
ctx.moveTo(a[0],b[0]);
for (var j=1;j<a.length;j++)
ctx.lineTo(a[j],b[j]);
ctx.closePath();
ctx.fillStyle=fillColor;
ctx.fill();
}
function randomColor(){
var s ="#";
for (var i=0;i<3;i++)
s += Math.floor(Math.random()*16).toString(16);
return s;
}
function locateCoordinate() {
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
g2d.translate(xClock,yClock); //置坐標(biāo)軸原點(diǎn)于表心
var c=document.getElementById("myPendulum");
var g2d=c.getContext("2d");
g2d.translate(xClock,yClock); //置坐標(biāo)軸原點(diǎn)于表心
}
function drawFace(){ //定義畫鐘表表面drawFace方法
/* 表示1,2,4,5,7,8,10,11點(diǎn)鐘位置的較小尺寸的菱形標(biāo)志頂點(diǎn)坐標(biāo)數(shù)組 */
var x = new Array(0, Math.round(d/30), 0, Math.round(-d/30));
var y = new Array( Math.round(-d*1.07),-d,Math.round(-d*0.9),-d);
/* 表示3,6,9,12點(diǎn)鐘位置的較大尺寸的菱形標(biāo)志頂點(diǎn)坐標(biāo)數(shù)組 */
var x1= new Array(0,Math.round(d/15),0,Math.round(-d/15));
var y1 =new Array(Math.round(-d*1.13),-d,Math.round(-d*0.9),-d);
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
//下面開始 準(zhǔn)備畫鐘表圓面邊
g2d.beginPath();
g2d.arc(0,0,d, 0 , 2*Math.PI);
g2d.strokeStyle="lightGray";
g2d.lineWidth=d/18;
g2d.stroke(); //最后一筆，畫鐘表圓面邊
//下面開始準(zhǔn)備畫表示 每個(gè)鐘點(diǎn) 的菱形
for (var i=0;i<12;i++)
{ //for 循環(huán)語(yǔ)句的循環(huán)體開始
if (i%3==0){ //畫較大尺寸的紅色菱形，表示3,6,9,12點(diǎn)
fillPolygon( x1, y1, "red", g2d);
} else {//畫較小尺寸的桔黃色菱形，表示其余的鐘點(diǎn)
fillPolygon(x,y,"orange",g2d);
}
//以鐘表表心為原點(diǎn),坐標(biāo)系順時(shí)針轉(zhuǎn)動(dòng)30度,以便畫下一個(gè)鐘點(diǎn)位置的菱形標(biāo)記
g2d.rotate(Math.PI/6.0);
}//for 循環(huán)語(yǔ)句的循環(huán)體結(jié)束
}//畫鐘表表面 drawFace 方法結(jié)束
/* 定義畫鐘表的時(shí)針、分針、和秒針的方法 drawNeedles
* 形參 Hradian，單位弧度， 為時(shí)針從0點(diǎn)算起的弧度位置，
* 形參 Mradian，單位弧度， 為分針從0分算起的弧度位置，
* 形參 Sradian，單位弧度， 為秒針從0秒算起的弧度位置。*/
function drawNeedles( Hradian, Mradian, Sradian ){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
//以鐘表表心為原點(diǎn),坐標(biāo)系順時(shí)針轉(zhuǎn)動(dòng)Hradian弧度,以便畫出時(shí)針
g2d.rotate(Hradian);
//表示時(shí)針的多邊形頂點(diǎn)的坐標(biāo)數(shù)組
var Hx =new Array(0, Math.round(d/19),0, Math.round(-d/19) );
var Hy =new Array( Math.round(-d/2), Math.round(-d/3), 0, Math.round(-d/3) );
fillPolygon(Hx,Hy,"magenta",g2d);//時(shí)針設(shè)為紫紅色,
//以鐘表表心為原點(diǎn),坐標(biāo)系逆時(shí)針轉(zhuǎn)動(dòng)Hradian弧度,以還原坐標(biāo)系
g2d.rotate(-Hradian);
//以鐘表表心為原點(diǎn),坐標(biāo)系順時(shí)針轉(zhuǎn)動(dòng)Mradian弧度,以便畫出分針
g2d.rotate(Mradian);
//表示分針的多邊形頂點(diǎn)的坐標(biāo)數(shù)組
var Mx=new Array(Math.round(-d/19),0,Math.round(d/19));
var My=new Array(0,Math.round(-d/1.3),0);
fillPolygon(Mx,My,"gray",g2d); //分針設(shè)為灰色
//以鐘表表心為原點(diǎn),坐標(biāo)系逆時(shí)針轉(zhuǎn)動(dòng)Mradian弧度,以還原坐標(biāo)系
g2d.rotate(-Mradian);
//以鐘表表心為原點(diǎn),坐標(biāo)系順時(shí)針轉(zhuǎn)動(dòng)Sradian弧度,以便畫出秒針
g2d.rotate(Sradian);
// 秒針設(shè)為隨機(jī)顏色
g2d.strokeStyle='green';
g2d.lineWidth="1";
g2d.moveTo(0,0);
g2d.lineTo(0,Math.round(-d/1.1));
g2d.stroke();
g2d.beginPath();
g2d.arc(0,Math.round(-d),d/18, 0 , 2*Math.PI);
g2d.fillStyle=randomColor();
g2d.fill(); //最后一筆，畫秒針頂點(diǎn)的小球
//以鐘表表心為原點(diǎn),坐標(biāo)系逆時(shí)針轉(zhuǎn)動(dòng)Sradian弧度,以還原坐標(biāo)系
g2d.rotate(-Sradian);
} //畫表針方法 drawNeedles的代碼塊結(jié)束
/* 畫出字符串來表示瞬時(shí)時(shí)間 */
function DrawTime() {
var time=new Date(); //獲取當(dāng)前時(shí)間。
var hour=time.getHours(); //獲取小時(shí)
var minute=time.getMinutes();//獲取分鐘
var second=time.getSeconds();//獲取秒數(shù)
var apm="AM"; //默認(rèn)顯示上午：AM.
var canvas =document.getElementById("myCanvas");
var g2d =canvas.getContext("2d");
if(hour>12){
//按照12小時(shí)制止顯示
hour=hour-12;
apm="PM";
}
if(minute<10){
//如果分鐘只有1位，補(bǔ)0顯示
minute="0"+minute;
}
if(second<10){ //如果秒數(shù)只有1位，補(bǔ)0顯示
second="0"+second;
}
g2d.clearRect(-xClock,-yClock,600,600); //清屏
var s = hour+":"+minute+":"+second+":"+apm;
g2d.fillStyle="red";
g2d.font = d/4+ "px KAITI";
g2d.fillText(s,-d/1.8, d*1.4);
g2d.font= d/4 + "px 楷體";
// Create gradient
var gradient=g2d.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
g2d.fillStyle=gradient;
g2d.fillText("大數(shù)據(jù)",-d/2.6,d/2);
//獲得實(shí)例創(chuàng)建瞬間的秒讀數(shù),由此計(jì)算出秒針,相對(duì)于0 秒,走過的弧讀數(shù)
var c = Math.PI/30 * second;
//獲得創(chuàng)建瞬間的的分鐘讀數(shù),由此計(jì)算出分針,相對(duì)于0 分,走過的弧讀數(shù)
var b = Math.PI/30 * minute;
/* 獲得創(chuàng)建瞬間的的鐘點(diǎn)讀數(shù),由此計(jì)算出時(shí)針,相對(duì)于0 點(diǎn),走過的弧讀數(shù)。
* 時(shí)針走過的弧度為整點(diǎn)的度數(shù)(每小時(shí)走30度),加上走過分鐘數(shù)的修正值 */
var a = Math.PI/180*(30 * hour + minute/2);
/* 坐標(biāo)系平移 (xClock,yClock) ，使得坐標(biāo)軸成為表盤中心 */
drawFace();
drawNeedles( a, b, c);
} // 方法 DrawTime 的代碼塊結(jié)束
var i=0;
function pendulum() { //pendulum_bob
var instantAngle = new Array(64,61,56,49,40,29,16,3,-8,
-16,-29,-40,-49,-56,-61,-64,-64,-64,-61,-56,-49,-40,-29,
-16,-8,3,16,29,40,49,56,61,64,64); //擺的即時(shí)角度數(shù)組
var c=document.getElementById("myPendulum");
var ctx=c.getContext("2d");
var alpha=instantAngle[i++%instantAngle.length]*Math.PI/180;
ctx.clearRect(-300,-300,900,900);
ctx.rotate(alpha);
// 秒針設(shè)為隨機(jī)顏色
ctx.fillStyle='brown';
ctx.fillRect(-3,0,6,d*1.4);
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
//ctx.fillRect(-d/3.5, d*1.35, d/1.6, d/4.4);
ctx.font="40px 楷體";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","white");
// Fill with gradient
//ctx.fillStyle=gradient;
ctx.fillStyle="red";
ctx.fillText("大數(shù)據(jù)",-d/3.2,d*1.55);
ctx.shadowBlur=0;
ctx.shadowColor=null;
ctx.fillStyle=null;
ctx.rotate(-alpha);
}
function preparation(){
locateCoordinate()
setInterval('DrawTime()',500);
setInterval('pendulum()',200);
}
</script>
<style>
#myCanvas{
z-index:3;
position:absolute; left:0px; top:0px;
}
#myPendulum{
z-index:2;
position:absolute; left:0px; top:0px;
}
#controlPanel{
position:absolute; left:600px; top:0px;
width:100px;
text-align:center;
font-family:"楷體";
font-size:20px;
font-weight:bold;
color:#6C0;
}
</style>
</head>
<body onLoad="preparation()">
<canvas id="myCanvas" width="600" height="600" >
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<canvas id="myPendulum" width="600" height="600" >
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<div id="controlPanel">
<table>
<tr><td>控制</td><td>按鈕</td></tr>
<tr><td><input value="增大" type="button" onclick="enlarge()"></button></td>
<td><input value="縮小" type="button" onclick="reduce()"></button></td></tr>
<tr><td><input value="左移" type="button" onclick="westwards()"></button></td>
<td><input value="右移" type="button" onclick="eastwards()"></button></td></tr>
<tr><td><input value="上移" type="button" onclick="upwards()"></button></td>
<td><input value="下移" type="button" onclick="downwards()"></button></td>
</tr>
</table>
</div>
</body>
</html>
效果圖：
希望本文所述對(duì)大家的web程序設(shè)計(jì)有所幫助。
相關(guān)文章
本篇文章主要介紹了Dropify.js圖片寬高自適應(yīng)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
JS判斷網(wǎng)頁(yè)廣告是否被瀏覽器攔截過濾的代碼
這篇文章主要介紹了JS判斷網(wǎng)頁(yè)廣告是否被瀏覽器攔截過濾的代碼,需要的朋友可以參考下2015-04-04
下面小編就為大家?guī)硪黄趈s中的原型(全面講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了JavaScript前端超時(shí)異步操作的完美解決方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
游戲人文件夾程序 ver 3.0...2006-07-07
js實(shí)時(shí)獲取系統(tǒng)當(dāng)前時(shí)間實(shí)例代碼
在網(wǎng)頁(yè)中實(shí)時(shí)的顯示時(shí)間，不但可以給網(wǎng)頁(yè)添色，還可以方便瀏覽者掌握當(dāng)前時(shí)間，為了提高網(wǎng)站的開發(fā)速度，可以把主代碼封裝在一個(gè)單獨(dú)的函數(shù)里面，在需要的時(shí)候直接調(diào)用 而我為了演示，直接寫在了主頁(yè)面，方便大家觀看2013-06-06
在Webpack中用url-loader處理圖片和字體的問題
這篇文章主要介紹了在Webpack中用url-loader處理圖片和字體的問題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Three.js如何用軌跡球插件（trackball）增加對(duì)模型的交互功能詳解
這篇文章主要給大家介紹了關(guān)于Three.js如何用軌跡球插件，也就是trackball增加對(duì)模型的交互功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-09-09
layui 選擇列表,打勾,點(diǎn)擊確定返回?cái)?shù)據(jù)的例子
今天小編就為大家分享一篇layui 選擇列表,打勾,點(diǎn)擊確定返回?cái)?shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
ajax接收后臺(tái)數(shù)據(jù)在html頁(yè)面顯示
本篇文章主要介紹了ajax接收后臺(tái)數(shù)據(jù)在html頁(yè)面顯示的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02