這篇文章主要介紹怎么使用canvas畫“哆啦A夢”時鐘，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、隆陽網(wǎng)站維護(hù)、網(wǎng)站推廣。

正文：

今天先上圖吧，看看效果再說

今天的藍(lán)胖子長這樣，看到它還是這么胖，我就放心了。這世界還是充滿正能量的，總歸還有人比我胖，哈哈哈

然后是上代碼

html部分

<canvas id="myCanvas" width="500" height="500">快去升級瀏覽器吧~</canvas>

Js部分

window.addEventListener("load", function(){
//獲取畫布上下文
var context = document.getElementById("myCanvas").getContext("2d");
//判斷上下文是否存在，存在則可以執(zhí)行接下來的代碼
if(context){
//開始一個新的子路徑
context.beginPath();

//我們準(zhǔn)備畫兩個同心圓作為時鐘的邊框
//畫一個外面的大圓
context.arc(100,100,99,0,2*Math.PI,false);
//以某種很好看的藍(lán)色填充
context.fillStyle = "#315f9b";
context.fill();
//畫大圓的邊線
context.stroke();
//開始一條新的子路徑，
//此處是必須的，要不然之后填充的顏色會把之前的全部覆蓋
context.beginPath();
//將開始點移動到(194,100)，用半徑和圓心計算得出的點
context.moveTo(194,100);
//畫內(nèi)部的小圓（圓神？）
context.arc(100,100,94,0,2*Math.PI,false);
//用另一種很好看的稍淺藍(lán)色填充內(nèi)部小圓
context.fillStyle = "#4ba2cf";
context.fill();
context.stroke();
//藍(lán)胖子出現(xiàn)啦~
//創(chuàng)建一個Image對象，將它的src設(shè)置為藍(lán)胖子的圖片
var image = new Image();
image.src = "2.png";
//用上下文的方法drawImage將圖片從點(25,25)開始畫，畫在邊長150的矩形中
context.drawImage(image,25,25,150,150);
//移動變換矩陣
//移動后(100,100)作為新的原點，即(0,0)
context.translate(100,100);
//用一個同樣很好看的藍(lán)色來畫我們的時間點
context.fillStyle = "#02285a";
//fillText第一個參數(shù)為要畫的字符串，第二個參數(shù)為x，第三為y
//以下x,y值是調(diào)試后的效果，大家根據(jù)不同情況，再做調(diào)整哦
context.fillText("12",-5,-80);
context.fillText("6",-4,87);
context.fillText("3",80,1);
context.fillText("9",-86,1);
//稍候詳述此函數(shù)
nowTime(context);
}
},false);

以上時鐘的表盤都出現(xiàn)了，但是時鐘之所以為時鐘最重要的就是它能顯示時間?。◤U話），所以接下來就是畫指針咯

nowTime函數(shù)部分

function nowTime(context){
//創(chuàng)建一個日期對象，用來獲取本地的時間
var myDate = new Date();
//獲取小時，分鐘，秒鐘
var myHour = myDate.getHours();
//將小時轉(zhuǎn)換為12時制
if(myHour >= 12){
myHour = myHour-12;
}
var myMin = myDate.getMinutes();
var mySec = myDate.getSeconds();
//描繪小時
//用來存放當(dāng)前小時在表盤上的弧度
var hourArc;
//以3時作為圓周的起點，順時針表示弧度
if(myHour < 3){
hourArc = 2*Math.PI-(3-myHour)*Math.PI/6;
}else{
hourArc = (myHour-3)*Math.PI/6;
}
//當(dāng)指向3,6,9,12時，正好為90°的倍數(shù)
//此處因為角度轉(zhuǎn)換為弧度有偏差，所以特別處理下
switch(myHour){
case 0:
hourArc = Math.PI*3/2;break;
case 3:
hourArc = 0;break;
case 6:
hourArc = Math.PI/2;break;
case 9:
hourArc = Math.PI;break;
}
//調(diào)用drawTime函數(shù)，在表盤上畫出小時針
drawTime(context,hourArc,60);
//描繪分鐘
//用來存放當(dāng)前分鐘在表盤上的弧度
var minArc; 
//以15分作為圓周的起點，順時針表示弧度
if(myMin < 15){
minArc = 2*Math.PI-(15-myMin)*Math.PI/30;
}else{
minArc = (myMin-15)*Math.PI/30;
}
//處理分鐘，依然是此處因為角度轉(zhuǎn)換為弧度有偏差，所以特別處理下
switch(myMin){
case 0:
minArc = Math.PI*3/2;break;
case 15:
minArc = 0;break;
case 30:
minArc = Math.PI/2;break;
case 45:
minArc = Math.PI;break;
}
//調(diào)用drawTime函數(shù)，在表盤上畫出分鐘針
drawTime(context,minArc,80);
//描繪秒鐘
//用來存放當(dāng)前秒鐘在表盤上的弧度
var secArc;
//以15秒作為圓周的起點，順時針表示弧度
if(mySec < 15){
secArc = 2*Math.PI-(15-mySec)*Math.PI/30;
}else{
secArc = (mySec-15)*Math.PI/30;
}
//處理秒鐘，依然依然此處因為角度轉(zhuǎn)換為弧度有偏差，所以特別處理下
switch(mySec){
case 0:
secArc = Math.PI*3/2;break;
case 14:
secArc = 0;break;
case 29:
secArc = Math.PI/2;break;
case 44:
secArc = Math.PI;break;
}
//調(diào)用drawTime函數(shù)，在表盤上畫出小時針
drawTime(context,secArc,80,"red");
//設(shè)置一個超時調(diào)用函數(shù)，每一秒超時調(diào)用nowTime更新時鐘
setTimeout(function(){
//調(diào)用畫新的指針前，當(dāng)然應(yīng)該要清除下原來的時針吧，用clearTime函數(shù)，真的好用！
clearTime(context);
//把閑雜指針清除了，再畫一次當(dāng)前的指針吧~
nowTime(context);
},1000);
}

那么，我們具體是怎么操作上下文畫出指針的呢？我也不知道，所以，我們今天就到此結(jié)束吧~

開玩笑啦，嘿嘿,take it easy（一定要假裝被我整到哈）

接下來是drawTime函數(shù)，它一共有四個參數(shù)（context,theArc,theLength,color="#000")，context一眼看穿是畫布的上下文，theArc則是我們要旋轉(zhuǎn)畫布的角度，theLength代表指針的長度，color則是指針的顏色。

function drawTime(context,theArc,theLength,color="#000"){
//保存當(dāng)前的畫布環(huán)境，和restore方法配合使用能夠恢復(fù)畫布上下文
context.save();
//旋轉(zhuǎn)畫布，rotate傳入的參數(shù)代表旋轉(zhuǎn)的弧度
context.rotate(theArc);
//開始一條新的子路徑，我們開始畫指針啦
context.beginPath();
//將開始點移動到(0,0)
context.moveTo(0,0);
//畫一條到(theLength,0)的路徑
context.lineTo(theLength,0);
//用指定的color顏色畫這條路徑
context.strokeStyle = color;
//路徑的寬度為2
context.lineWidth = 2;
//路徑是不可見的，如果要看到路徑，需要用stroke來描線，而如何描這條線，可以由我們以上用到的幾個屬性來定義
context.stroke();
//恢復(fù)上下文
context.restore();
}

雖然接近尾聲啦，但是還有一個很重要的clearTime函數(shù)，要是沒有它，你的時鐘會被密密麻麻的秒針占領(lǐng)的，關(guān)愛密集恐懼癥患者，我們?nèi)巳擞胸?zé)

function clearTime(context){
//我們開始一條新的子路徑，然后描繪一個充斥著好看藍(lán)色的圓，把我們之前畫的指針都遮蓋住，相當(dāng)于清除了一次表盤
context.beginPath();
context.arc(0,0,80,0,2*Math.PI,false);
context.fillStyle = "#4ba2cf";
context.fill();
//很不幸，我們的藍(lán)胖子也被誤傷了，所以再召喚它一次吧，決定就是你啦，皮卡丘（？咦）
var image = new Image();
image.src = "2.png";
//這個坐標(biāo)和第一次加載的坐標(biāo)不同，因為我們修改了變換矩陣，還記得嗎？所以，它們的坐標(biāo)應(yīng)該是互補的
context.drawImage(image,-75,-75,150,150);
}

嗯啦，ok，現(xiàn)在是真的到此為止啦，差不多該去吃飯咯~各位可愛的程序猿們要記得吃飯哦~

以上是“怎么使用canvas畫“哆啦A夢”時鐘”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)頁名稱：怎么使用canvas畫“哆啦A夢”時鐘-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://jinyejixie.com/article30/ddecso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、App開發(fā)、網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、動態(tài)網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)