JavaScript學習小結之使用canvas畫“哆啦A夢”時鐘，javascriptcanvas

JavaScript學習小結之使用canvas畫“哆啦A夢”時鐘，javascriptcanvas

前言：今天看完了Js書的canvas畫布那張，好開心~又是心愛的canvas~歐耶~

之前看到有人建議我畫藍胖子，對哦，我怎麼把童年最喜歡的藍胖子忘了，為了表達我對藍胖子的歉意，所以今天畫了會動的hello world，也算是一種進步咯~

好的各位，請上車的乘客往裡走，請不要堵塞通道，謝謝。我們開車吧~

本文：

今天先吧，看看效果再說

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

然後是上代碼

html部分

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

Js部分

window.addEventListener("load", function(){//擷取畫布上下文var context = document.getElementById("myCanvas").getContext("2d");//判斷上下文是否存在，存在則可以執行接下來的代碼if(context){//開始一個新的子路徑context.beginPath();//我們準備畫兩個同心圓作為時鐘的邊框//畫一個外面的大圓context.arc(100,100,99,0,2*Math.PI,false);//以某種很好看的藍色填充context.fillStyle = "#315f9b";context.fill();//畫大圓的邊線context.stroke();//開始一條新的子路徑，//此處是必須的，要不然之後填充的顏色會把之前的全部覆蓋context.beginPath();//將開始點移動到(194,100)，用半徑和圓心計算得出的點context.moveTo(194,100);//畫內部的小圓（圓神？）context.arc(100,100,94,0,2*Math.PI,false);//用另一種很好看的稍淺藍色填充內部小圓context.fillStyle = "#4ba2cf";context.fill();context.stroke();//藍胖子出現啦~//建立一個Image對象，將它的src設定為藍胖子的圖片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);//用一個同樣很好看的藍色來畫我們的時間點context.fillStyle = "#02285a";//fillText第一個參數為要畫的字串，第二個參數為x，第三為y//以下x,y值是調試後的效果，大家根據不同情況，再做調整哦context.fillText("12",-5,-80);context.fillText("6",-4,87);context.fillText("3",80,1);context.fillText("9",-86,1);//稍候詳述此函數nowTime(context);}},false);

以上時鐘的錶盤都出現了，但是時鐘之所以為時鐘最重要的就是它能顯示時間啊（廢話），所以接下來就是畫指標咯

nowTime函數部分

function nowTime(context){//建立一個日期對象，用來擷取本地的時間var myDate = new Date();//擷取小時，分鐘，秒鐘var myHour = myDate.getHours();//將小時轉換為12時制if(myHour >= 12){myHour = myHour-12;}var myMin = myDate.getMinutes();var mySec = myDate.getSeconds();//描繪小時//用來存放當前小時在錶盤上的弧度var hourArc;//以3時作為圓周的起點，順時針表示弧度if(myHour < 3){hourArc = 2*Math.PI-(3-myHour)*Math.PI/6;}else{hourArc = (myHour-3)*Math.PI/6;}//當指向3,6,9,12時，正好為90°的倍數//此處因為角度轉換為弧度有偏差，所以特別處理下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;}//調用drawTime函數，在錶盤上畫出小時針drawTime(context,hourArc,60);//描繪分鐘//用來存放當前分鐘在錶盤上的弧度var minArc; //以15分作為圓周的起點，順時針表示弧度if(myMin < 15){minArc = 2*Math.PI-(15-myMin)*Math.PI/30;}else{minArc = (myMin-15)*Math.PI/30;}//處理分鐘，依然是此處因為角度轉換為弧度有偏差，所以特別處理下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;}//調用drawTime函數，在錶盤上畫出分鐘針drawTime(context,minArc,80);//描繪秒鐘//用來存放當前秒鐘在錶盤上的弧度var secArc;//以15秒作為圓周的起點，順時針表示弧度if(mySec < 15){secArc = 2*Math.PI-(15-mySec)*Math.PI/30;}else{secArc = (mySec-15)*Math.PI/30;}//處理秒鐘，依然依然此處因為角度轉換為弧度有偏差，所以特別處理下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;}//調用drawTime函數，在錶盤上畫出小時針drawTime(context,secArc,80,"red");//設定一個逾時調用函數，每一秒逾時調用nowTime更新時鐘setTimeout(function(){//調用畫新的指標前，當然應該要清除下原來的時針吧，用clearTime函數，真的好用！clearTime(context);//把閑雜指標清除了，再畫一次當前的指標吧~nowTime(context);},1000);}

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

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

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

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

雖然接近尾聲啦，但是還有一個很重要的clearTime函數，要是沒有它，你的時鐘會被密密麻麻的秒針佔領的，關愛密集恐懼症患者，我們人人有責

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

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