最近學習了H5中的一個新標簽canvas並且用它做出了一個時鍾,最下面是成品圖像,還不錯吧,這只是我學習中的一個小demo,做得有點粗糙,但終究是做出來了,以后再寫自己的網頁主頁再做一個好看點放上去。接下來我將和你們分享如何制作這個時鍾。
在body中添加canvas標簽:
<canvas id="myCanvas" width="600px" height="600px" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
此處大小樣式可以自行設置為圖方便我就寫在標簽中了。
接下來就是javascript代碼的書寫了
window.onload = function(){ var myCanvas = document.getElementById("myCanvas"); if (!myCanvas.getContext) { alert("Your browser does not support the canvas element."); } else {......} }
window加載完之后,先get到canvas 然后通過getContext方法判斷你的瀏覽器是否支持canvas
保證瀏覽器支持后再else中就開始畫時鍾了
var myContext = myCanvas.getContext("2d"); //指定二維繪圖 可以把myContext看做是一個畫筆
首先畫出大圓盤
var deg = 2 * Math.PI / 12; myContext.fillStyle="#0000ff"; //設置所圍區域填充色 myContext.strokeStyle="gray"; //設置畫的線的填充色 也就是最外面的一圈線 myContext.lineWidth=2; //設置線的寬度 myContext.save(); myContext.beginPath(); //開始作圖 myContext.translate(300,300); //將原點移動到指定位置,這個位置就被看做是新的原點了 myContext.moveTo(0,-200); //將畫筆移動到指定位置,這里(300,300)是圓心所以我把它移動到圓的最上端開始畫圖 for(var i = 0 ; i < 13 ; i++){ var x = Math.sin(i * deg); var y = Math.cos(i * deg); myContext.lineTo( x * 200, - y * 200); } myContext.fill(); //調用fill進行填充顏色 myContext.stroke(); //調用stroke將線的顏色塗上 myContext.closePath(); //關閉畫筆 myContext.restore(); //重置畫筆
接下來是將數字畫上去 上面注釋過的就不再重復注釋了
myContext.save(); myContext.beginPath(); myContext.translate(300,300); for(var i =1 ;i < 13 ; i++){ var xl = Math.sin(i * deg); var yl = Math.cos(i * deg); myContext.fillStyle="#ffffff"; myContext.font="blod 20px Calibri"; //設置字體 myContext.textBaseline='middle'; //設置在繪制文本時的當前文本基線 middle文本基線是 em 方框的正中 myContext.fillText(i,xl * 180 -5 , - yl * 180 ); //第一個參數是所寫的文本,后面兩個是坐標 } myContext.closePath(); myContext.restore();
畫出大刻度盤
myContext.save(); myContext.beginPath(); myContext.translate(300,300); for(var i = 0 ; i < 12 ; i++) { var xo = Math.sin(i * deg); var yo = Math.cos(i * deg); myContext.moveTo( xo * 198 ,- yo * 198); myContext.lineTo( xo * 187 , - yo * 187); } myContext.strokeStyle = "#ffffff"; myContext.lineWidth=4; myContext.stroke(); myContext.closePath(); myContext.restore();
畫出小刻度
var deg0 = 2 * Math.PI/60; myContext.save(); myContext.beginPath(); myContext.translate(300,300); for( var i = 0 ; i < 60 ; i++){ var xh = Math.sin(i * deg0); var yh = Math.cos(i * deg0); myContext.moveTo( xh * 194 , - yh * 194); myContext.lineTo( xh * 187 , - yh * 187); } myContext.strokeStyle = "#ffffff"; myContext.lineWidth=2; myContext.stroke(); myContext.closePath(); myContext.restore();
在中間添加文字,你可以隨意添加任何你想要的文字
myContext.save(); myContext.font = '60px sans-serif'; myContext.textAlign = 'center'; myContext.textBaseline = "middle"; myContext.strokeText("canvas",300,400); myContext.restore();
創建一個實時時間
var time = new Date(); var h = (time.getHours() % 12) * 2 * Math.PI/12; var m = time.getMinutes() * 2 * Math.PI/60; var s = time.getSeconds() *2 * Math.PI/60;
接下來就是畫上時針、分針、秒針了
秒針
myContext.save(); myContext.beginPath(); myContext.translate(300,300); myContext.rotate(s); myContext.moveTo(0,0); myContext.lineTo(0,-180); myContext.strokeStyle = "#ffffff"; myContext.lineWidth = 2; myContext.stroke(); myContext.closePath(); myContext.restore();
分針
myContext.save(); myContext.beginPath(); myContext.translate(300,300); myContext.rotate( m + s /60); myContext.moveTo(0,0); myContext.lineTo(0,-150); myContext.strokeStyle = "#ffffff"; myContext.lineWidth = 4; myContext.stroke(); myContext.closePath(); myContext.restore();
時針
myContext.save(); myContext.beginPath(); myContext.translate(300,300); myContext.rotate(h + m/60); myContext.moveTo(0,0); myContext.lineTo(0,-120); myContext.strokeStyle = "#ffffff"; myContext.lineWidth = 6; myContext.stroke(); myContext.closePath(); myContext.restore();
給中間加一個方塊
myContext.save(); myContext.beginPath(); myContext.fillStyle="#ffffff"; myContext.fillRect(290,290,20,20); myContext.closePath(); myContext.restore();
最后要讓這個時鍾自己轉動起來
setTimeout(arguments.callee,1000);
好了,到這里就完成了,是不是感覺很簡答,你還在等什么,趕快動手制作一個炫酷的時鍾吧。