這篇文章主要介紹了JavaScript學習小結之使用canvas畫「哆啦A夢」時鐘的相關資料,需要的朋友可以參考下
前言:今天看完了Js書的canvas畫布那張,好開心~又是心愛的canvas~歐耶~
之前看到有人建議我畫藍胖子,對哦,我怎麼把童年最喜歡的藍胖子忘了,為了表達我對藍胖子的歉意,所以今天畫了會動的hello world,也算是一種進步咯~
好的各位,請上車的乘客往裡走,請不要堵塞通道,謝謝。我們開車吧~
正文:
今天先上圖吧,看看效果再說
今天的藍胖子長這樣,看到它還是這麼胖,我就放心了。這世界還是充滿正能量的,總歸還有人比我胖,哈哈哈
然後是上碼
#html部分
1 | < canvas id = "myCanvas" width = "500" height = "500" >快去升级浏览器吧~</ canvas >
|
登入後複製
Js部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 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();
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI, false );
context.fillStyle = "#4ba2cf" ;
context.fill();
context.stroke();
var image = new Image();
image.src = "2.png" ;
context.drawImage(image,25,25,150,150);
context.translate(100,100);
context.fillStyle = "#02285a" ;
context.fillText( "12" ,-5,-80);
context.fillText( "6" ,-4,87);
context.fillText( "3" ,80,1);
context.fillText( "9" ,-86,1);
nowTime(context);
}
}, false );
|
登入後複製
以上時鐘的錶盤都出現了,但是時鐘之所以為時鐘最重要的就是它能顯示時間啊(廢話),所以接下來就是畫指標咯
nowTime函數部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | function nowTime(context){
var myDate = new Date();
var myHour = myDate.getHours();
if (myHour >= 12){
myHour = myHour-12;
}
var myMin = myDate.getMinutes();
var mySec = myDate.getSeconds();
var hourArc;
if (myHour < 3){
hourArc = 2*Math.PI-(3-myHour)*Math.PI/6;
} else {
hourArc = (myHour-3)*Math.PI/6;
}
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(context,hourArc,60);
var minArc;
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(context,minArc,80);
var secArc;
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(context,secArc,80, "red" );
setTimeout( function (){
clearTime(context);
nowTime(context);
},1000);
}
|
登入後複製
那麼,我們具體是怎麼操作上下文畫出指標的呢?我也不知道,所以,我們今天就到此結束吧~
開玩笑啦,嘿嘿,take it easy(一定要假裝被我整到哈)
接下來是drawTime函數,它一共有四個參數(context,theArc,theLength,color="#000"),context一眼看穿是畫布的上下文,theArc則是我們要旋轉畫布的角度,theLength代表指針的長度,color則是指針的顏色。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function drawTime(context,theArc,theLength,color= "#000" ){
context.save();
context.rotate(theArc);
context.beginPath();
context.moveTo(0,0);
context.lineTo(theLength,0);
context.strokeStyle = color;
context.lineWidth = 2;
context.stroke();
context.restore();
}
|
登入後複製
雖然接近尾聲啦,但是還有一個很重要的clearTime函數,要是沒有它,你的時鐘會被密密麻麻的秒針佔領的,關懷密集恐懼症患者,我們人人有責
1 2 3 4 5 6 7 8 9 10 11 12 | 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,現在是真的到此為止啦,差不多該去吃飯咯~各位可愛的程序猿們要記得吃飯哦~
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
canvas 模擬實作電子彩票刮刮樂的程式碼
利用HTML5中的Canvas繪製笑臉的程式碼
HTML5與CSS3實作3D展示商品資訊的程式碼
##
以上是使用canvas畫「哆啦A夢」時鐘的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!