通過H5的新標簽canvas做出一個時鍾的全過程,希望對初學者有幫助


最近學習了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);

 

好了,到這里就完成了,是不是感覺很簡答,你還在等什么,趕快動手制作一個炫酷的時鍾吧。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM