站長(zhǎng)資訊網(wǎng)平時(shí)在公司不忙的時(shí)候，就喜歡寫一些小效果什么的，一來(lái)復(fù)習(xí)復(fù)習(xí)，二來(lái)可以發(fā)現(xiàn)一些問(wèn)題。
今天在群里看別人發(fā)了一手表的圖片，臥槽…妥妥的工作好多年的節(jié)奏，后來(lái)想想還是做好自己的事情算了，想那多干啥，就畫了一個(gè)手表….
直接上代碼：
html
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>canvas clock</title><script type="text/javascript" src="percent.js?1.1.10"></script></head><body><canvas id="canvas" width="600" height="600"></canvas></body></html><script type="text/javascript">clock.canvasClock();</script>
js
var clock=(function(){function _canvasClock(){var cvs=document.getElementById('canvas');var ctx=cvs.getContext('2d');var PI=Math.PI;var lineWidth=5; //線寬var gradient=ctx.createLinearGradient(10,10,580,580); //設(shè)置圓的顏色漸變gradient.addColorStop("0","#a251ff"); gradient.addColorStop(1,"#2ec2ff"); ctx.fillStyle = '#ef6670'; ctx.fillRect(0,0,600,600);var drawBig=function(){var time=new Date();var second=time.getSeconds(); //秒var Minute=time.getMinutes(); //分var hour=time.getHours(); //時(shí)//hour=hour+Minute/60;hour=hour>12?hour-12:hour; //表盤只有12小時(shí) ctx.clearRect(0,0,600,600); //清空給定矩形內(nèi)的指定像素//畫圓 ctx.beginPath(); ctx.lineWidth=lineWidth; ctx.strokeStyle=gradient; ctx.arc(300,300,290,0, PI * 2,false); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.lineWidth=lineWidth; ctx.strokeStyle=gradient; ctx.arc(300,300,10,0, PI * 2,false); ctx.stroke(); ctx.closePath(); for(var i=0;i<60;i++){ ctx.save(); //保存之前畫布狀態(tài) ctx.lineWidth=4; //設(shè)置分針的粗細(xì) ctx.strokeStyle="#616161"; //設(shè)置分針的顏色 ctx.translate(300,300); //畫布圓點(diǎn)設(shè)置 ctx.rotate(i*PI/30); //角度*Math.PI/180=弧度,設(shè)置旋轉(zhuǎn)角度 ctx.beginPath(); //開始一條路徑ctx.moveTo(0,-287); //相對(duì)畫布圓點(diǎn)路徑的起點(diǎn)ctx.lineTo(0,-283); //相對(duì)畫布圓點(diǎn)路徑的終點(diǎn)ctx.closePath(); //結(jié)束一條路徑ctx.stroke(); //實(shí)際地繪制出通過(guò) moveTo()和 lineTo()方法定義的路徑ctx.restore(); //restore() 方法將繪圖狀態(tài)置為保存值 } for(var i=0;i<12;i++){ ctx.save(); ctx.lineWidth=4; ctx.strokeStyle=gradient; ctx.translate(300,300); ctx.rotate(i*PI/6); ctx.beginPath(); ctx.moveTo(0,-287); ctx.lineTo(0,-278); ctx.closePath(); ctx.stroke(); ctx.restore(); } //時(shí)針 ctx.save(); ctx.lineWidth=3; ctx.strokeStyle="#0f0f0f"; ctx.translate(300,300); ctx.rotate(hour*PI/6+second*PI/108000); ctx.beginPath(); ctx.moveTo(0,-238); ctx.lineTo(0,10); ctx.closePath(); ctx.stroke(); ctx.restore(); //分針 ctx.save(); ctx.lineWidth=3; ctx.strokeStyle="#010101"; ctx.translate(300,300); ctx.rotate(Minute*PI/30+second*PI/1800); ctx.beginPath(); ctx.moveTo(0,-258); ctx.lineTo(0,15); ctx.closePath(); ctx.stroke(); ctx.restore(); //秒針 ctx.save(); ctx.strokeStyle="#ff100d"; ctx.lineWidth=3; ctx.translate(300,300); ctx.rotate(second*PI/30); ctx.beginPath(); ctx.moveTo(0,-278); ctx.lineTo(0,20); ctx.closePath(); ctx.stroke(); ctx.beginPath(); //時(shí)針?lè)轴樏脶樈稽c(diǎn) ctx.arc(0,0,6,0,2*PI,false); ctx.closePath(); ctx.fillStyle="#fff"; ctx.fill(); ctx.stroke(); ctx.restore(); requestAnimationFrame(drawBig); //實(shí)現(xiàn)動(dòng)畫修改的接口 }; drawBig(); setInterval(drawBig,1000); //每1s重繪一次 };return{ canvasClock:_canvasClock, } }())
本來(lái)準(zhǔn)備封裝一下的，要下班時(shí)來(lái)任務(wù)了，飛了….
