canvas繪製時鐘

HTML5新增Canvas標籤及對應屬性、API詳解（基礎一）
時間：2015-07-13 15:33:03      閱讀：17269      評論：0      收藏：0      [點我收藏+]

標籤：

知識說明：

       HTML5新增的canvas標籤，經過建立畫布，在畫布上建立任何想要的形狀，下面將canvas的API以及屬性作一個整理，而且附上時鐘的示例，便於後期複習學習！Fighting！

1、標籤原型

<canvas width=」1000」 height=」1000」 id=」myCanvas」>

       您的瀏覽器版本太低，不支持HTML5新增的canvas標籤。

</canvas>

使用js獲取該畫布，並指定對象

<script>

       Var canvasID = document.getElementById(「myCanvas」);

       Var canvas = canvasID.getContext(「2d」);

</script>

2、canvas標籤常見屬性

屬性
    

值
    

功能描述

width
    

pixels
    

設置canvas的寬度

height
    

pixels
    

設置canvas的高度

3、canvas標籤的API整合

屬性
    

值
    

功能描述

save()
    

Canvas.save();
    

保存當前畫布環境狀態

Restore()
    

Canvas.restore();
    

返回以前保存的畫布的路徑狀態，與save()成對用

getContext()
    

Canvas.getContext();
    

返回一個對象，指出訪問繪圖功能必要的API

toDataURL()
    

Canvas.toDataURL();
    

返回canvas圖像的url

4、canvas標籤API的主要屬性整合

a、 畫圓

屬性
    

值
    

功能描述

fillStyle
    

Canvas.fillStyle=」#f00」
    

設置或返回用於填充繪畫的顏色、漸變或模式

strokeStyle
    

Canvas.strokeStyle=」#f0f」;
    

設置或返回用於筆觸的顏色、漸變或模式

beginPath()
    

Canvas.beginPath();
    

開啓畫路徑

closePath()
    

Canvas.closePath();
    

關閉畫路徑

Arc()
    

Canvas.arc(0,0,10,0,360,false);

參數：原點X、原點Y、原點起始弧度，原點結束弧度、順時針/逆時針
    

畫圓

Fill()
    

Canvas.fill()
    

填充

Stroke()
    

Canvas.stroke()
    

畫邊框

畫圓代碼片斷：

<script>

              var canvasID = document.getElementById("myCanvas");

              var canvas = canvasID.getContext("2d");

              //畫圓方法

              function drawArc(id)

              {

                     canvas.beginPath();

                     canvas.lineWidth = 5;

                     canvas.fillStyle = "#00f";

                     canvas.strokeStyle = "#0f0";

                     canvas.arc(100, 100, 50, 0, 360, false);

                     canvas.fill();

                     canvas.stroke();

                     canvas.closePath();

              }

              drawArc("myCanvas");

       </script>

b、 畫線

屬性
    

值
    

功能描述

Translate
    

Canvas.translate(200,200)
    

重置座標原點

lineWidth
    

Canvas. lineWidth=10;
    

設置線的寬度

moveTo ()
    

Canvas. moveTo (0,0);
    

開始畫線的初始位置

lineTo ()
    

Canvas. lineTo (100,0);
    

畫線結束點位置

畫線代碼片斷：

<script>

              var canvasID = document.getElementById("myCanvas");

              var canvas = canvasID.getContext("2d");

              function drawLine(id)

              {

                     canvas.save();

                     canvas.translate(150,100);

                     canvas.lineWidth= 10;

                     canvas.strokeStyle = "#999";

                     canvas.beginPath();

                     canvas.moveTo(0,0);

                     canvas.lineTo(100,0);

                     canvas.closePath();

                     canvas.stroke();

                     canvas.restore();

              }

              drawLine("myCanvas");

</script>

c、 畫多邊形

畫三角形代碼片斷：

//畫多邊形，此處以三角形爲例

<script>

        var canvasID = document.getElementById("myCanvas");

        var canvas = canvasID.getContext("2d");

        function drawSanjiao(id)

        {

               canvas.save();

               canvas.translate(250,40);

               canvas.lineWidth = 3;

               canvas.strokeStyle = "#0f0";

               canvas.beginPath();

               canvas.moveTo(0,0);

               canvas.lineTo(0,120);

               canvas.lineTo(100,60);

               canvas.lineTo(0,0);

               canvas.stroke();

               canvas.closePath();

               canvas.restore();

        }

        drawSanjiao("myCanvas");

</script>

d、 畫文字

畫文字代碼片斷：

<script>

        var canvasID = document.getElementById("myCanvas");

        var canvas = canvasID.getContext("2d");

function drawText(id)

        {

               canvas.save();

               canvas.translate(100,300);

               canvas.strokeStyle="#09";

               canvas.fillStyle = "#879";

               canvas.font = "normal 90px 微軟雅黑";

               canvas.strokeText("hello html5", 0, 0);

               canvas.fillText("hello html5", 0, 0);

               canvas.restore();

        }

        drawText("myCanvas");

</script>

以上a、b、c、d整合效果以下圖：

技術分享

5、使用canvas標籤繪製時鐘

代碼片斷：

<canvas width="1000" height="1000" id="clockCanvas">

      您的瀏覽器版本過低，不支持顯示時鐘的canvas標籤

</canvas>

      

       <script>

              var clockID = document.getElementById("clockCanvas");

              var clock = clockID.getContext("2d");

             

              /*步驟：畫鐘錶總體思路步驟分析

              一、使用canvas建立畫布，並建立一個2d對象

              二、使用function方法作計算

              三、實例化Date()對象，經過該對象獲取系統當前的時、分、秒

              四、經過計算將24小時制轉化爲12小時制

              五、畫表盤

              六、畫刻度盤

              七、畫指針

              八、使用setInterval(fun, time);設置動態

              */

             

              //畫時鐘的方法

              function drawClock(id)

              {

                     //每次清空畫布

                     clock.clearRect(0,0,1000,1000);

                     //獲取系統當前時間（時 、分 、秒）

                     var now = new Date();  //實例化一個當前時間的對象，經過該對象獲取系統當前時間

                     var sec = now.getSeconds();  //秒

                     var mins = now.getMinutes();  //分

                     var hours = now.getHours();    //時

 

                     //繪製文字，顯示系統當前時間：

                     clock.save();

                     clock.translate(0,500);

                     clock.fillStyle = "#ff0";

                     clock.strokeStyle = "#eee";

                     clock.font = "bold 50px 微軟雅黑";

                     clock.strokeText("系統當前時間爲："+hours+"時"+mins+"分"+sec+"秒", 100, 100);

                     clock.fillText("系統當前時間爲："+hours+"時"+mins+"分"+sec+"秒", 100, 100);

                     clock.restore();

                    

                     //計算：滿60分加一小時

                     hours = hours + mins/60;

                     //計算：將24小時制轉化爲12小時制

                     hours = hours>12?hours-12:hours;

                    

                     //畫表盤

                     clock.beginPath();

                     clock.lineWidth = 10;

                     clock.strokeStyle = "#ff00ff";

                     clock.arc(300, 300, 200, 0, 360, false);

                     clock.stroke();

                     clock.closePath();

                    

                     //畫刻度盤

                     //時刻度

                     for(var i = 0; i < 12; i++)

                     {

                            clock.save();

                            //將起始點定位到圓心

                            clock.translate(300,300);

                            //設置刻度的樣式

                            clock.lineWidth = 7;

                            clock.strokeStyle = "#999999";

                            //設置旋轉角度

                            clock.rotate(i*30*Math.PI/180);

                           

                            clock.beginPath();

                            clock.moveTo(0, -170);

                            clock.lineTo(0, -190);                     

                           

                            /*clock.font = "normal 20px 宋體";

                            clock.textAlign = "left";

                            clock.textBaseLine = "top";

                           

                            clock.strokeText(i, i*(-50)*Math.PI/180, -150);

                            clock.closePath();*/

                           

                            //畫刻度線

                            clock.stroke();

                            clock.restore();

                     }

                    

                     //分刻度

                     for(var j = 0; j<60; j++)

                     {

                            clock.save();

                            //設置起始點座標

                            clock.translate(300,300);

                            clock.lineWidth = 5;

                            clock.strokeStyle = "#999999";

                            //設置旋轉角度

                            clock.rotate(j*6*Math.PI/180);

                            clock.beginPath();

                            clock.moveTo(0, -180);

                            clock.lineTo(0, -190);

                            clock.closePath();

                            clock.stroke();

                            clock.restore();

                     }

                    

                     //時針

                     clock.save();

                     clock.translate(300,300);

                     clock.lineWidth = 7;

                     clock.strokeStyle = "#000000";

                     //設置小時的旋轉角度，沒轉一次走30°

                     clock.rotate(hours*30*Math.PI/180);                

                     clock.beginPath();

                     clock.moveTo(0,15);

                     clock.lineTo(0,-120);

                     clock.stroke();

                     clock.closePath();

                     clock.restore();

                    

                     //分針

                     clock.save();

                     clock.translate(300, 300);

                     clock.rotate(mins*6*Math.PI/180);

                     clock.lineWidth = 5;

                     clock.strokeStyle = "#000";

                     clock.beginPath();

                     clock.moveTo(0,20);

                     clock.lineTo(0,-160);

                     clock.stroke();

                     clock.closePath();

                     clock.restore();

                    

                     //秒針

                     clock.save();

                     clock.translate(300,300);

                     clock.rotate(sec*6*Math.PI/180);

                     clock.lineWidth = 3;

                     clock.strokeStyle = "#f00";

                     clock.beginPath();

                     clock.moveTo(0, 25);

                     clock.lineTo(0,-165);

                     clock.stroke();

                     clock.closePath();

                    

                     //秒針圓心處一個小圈

                     clock.fillStyle = "#999";

                     clock.strokeStyle = "#f00";

                     clock.beginPath();

                     clock.arc(0,0,6,0,360,false);

                     clock.fill();

                     clock.stroke();

                     clock.closePath();

                    

                     //秒針頂部一個小圈

                     clock.beginPath();

                     clock.arc(0,-140,6,0,360,false);

                     clock.fill();

                     clock.stroke();

                     clock.closePath();

                     clock.restore();

              }

              drawClock();

              setInterval(drawClock, 1000);  //是錶針根據系統當前時間轉動起來

       </script>

繪製結果以下圖：