快捷導(dǎo)航

JavaScript學(xué)習(xí)小結(jié)之使用canvas畫“哆啦A夢(mèng)”時(shí)鐘

更新時(shí)間：2016年07月24日 09:46:52 作者：玉菲莎

這篇文章主要介紹了JavaScript學(xué)習(xí)小結(jié)之使用canvas畫“哆啦A夢(mèng)”時(shí)鐘的相關(guān)資料,需要的朋友可以參考下

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

之前看到有人建議我畫藍(lán)胖子，對(duì)哦，我怎么把童年最喜歡的藍(lán)胖子忘了，為了表達(dá)我對(duì)藍(lán)胖子的歉意，所以今天畫了會(huì)動(dòng)的hello world，也算是一種進(jìn)步咯~

好的各位，請(qǐng)上車的乘客往里走，請(qǐng)不要堵塞通道，謝謝。我們開車吧~

正文：

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

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

然后是上代碼

html部分

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

Js部分

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

//我們準(zhǔn)備畫兩個(gè)同心圓作為時(shí)鐘的邊框
//畫一個(gè)外面的大圓
context.arc(100,100,99,0,2*Math.PI,false);
//以某種很好看的藍(lán)色填充
context.fillStyle = "#315f9b";
context.fill();
//畫大圓的邊線
context.stroke();
//開始一條新的子路徑，
//此處是必須的，要不然之后填充的顏色會(huì)把之前的全部覆蓋
context.beginPath();
//將開始點(diǎn)移動(dòng)到(194,100)，用半徑和圓心計(jì)算得出的點(diǎn)
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)建一個(gè)Image對(duì)象，將它的src設(shè)置為藍(lán)胖子的圖片
var image = new Image();
image.src = "2.png";
//用上下文的方法drawImage將圖片從點(diǎn)(25,25)開始畫，畫在邊長(zhǎng)150的矩形中
context.drawImage(image,25,25,150,150);
//移動(dòng)變換矩陣
//移動(dòng)后(100,100)作為新的原點(diǎn)，即(0,0)
context.translate(100,100);
//用一個(gè)同樣很好看的藍(lán)色來(lái)畫我們的時(shí)間點(diǎn)
context.fillStyle = "#02285a";
//fillText第一個(gè)參數(shù)為要畫的字符串，第二個(gè)參數(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);

以上時(shí)鐘的表盤都出現(xiàn)了，但是時(shí)鐘之所以為時(shí)鐘最重要的就是它能顯示時(shí)間啊（廢話），所以接下來(lái)就是畫指針咯

nowTime函數(shù)部分

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

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

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

接下來(lái)是drawTime函數(shù)，它一共有四個(gè)參數(shù)（context,theArc,theLength,color="#000")，context一眼看穿是畫布的上下文，theArc則是我們要旋轉(zhuǎn)畫布的角度，theLength代表指針的長(zhǎng)度，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();
//將開始點(diǎn)移動(dòng)到(0,0)
context.moveTo(0,0);
//畫一條到(theLength,0)的路徑
context.lineTo(theLength,0);
//用指定的color顏色畫這條路徑
context.strokeStyle = color;
//路徑的寬度為2
context.lineWidth = 2;
//路徑是不可見的，如果要看到路徑，需要用stroke來(lái)描線，而如何描這條線，可以由我們以上用到的幾個(gè)屬性來(lái)定義
context.stroke();
//恢復(fù)上下文
context.restore();
}

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

function clearTime(context){
//我們開始一條新的子路徑，然后描繪一個(gè)充斥著好看藍(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";
//這個(gè)坐標(biāo)和第一次加載的坐標(biāo)不同，因?yàn)槲覀冃薷牧俗儞Q矩陣，還記得嗎？所以，它們的坐標(biāo)應(yīng)該是互補(bǔ)的
context.drawImage(image,-75,-75,150,150);
}

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