摘要：有了，我們就再也不需要了，直接使用完成繪制。繪制原點開始時鐘開始時鐘我們將當前時間繪制到始終上面即可需要注意的是，在繪制之前需要將之前繪制的東西清除掉。

Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等。
沒有Canvas的年代，繪圖只能借助Flash插件實現，頁面不得不用JavaScript和Flash進行交互。有了Canvas，我們就再也不需要Flash了，直接使用JavaScript完成繪制。

基本使用

在html源碼中只要像普通標簽那樣使用即可，比如下面的示例，但是在一些老舊的瀏覽器在中是不支持canvas的，因此我們常在canvas標簽中提示用戶，具體代碼如下所示。

    
        您的瀏覽器不支持canvas,請嘗試更新瀏覽器
    

或者使用JS腳本來進行檢測，使用JavaScript代碼檢測是否支持canvas的代碼示例如下：

    var myCanvas = document.getElementById("myCanvas");
    if (myCanvas.getContext) {
        myCanvas.log("你的瀏覽器支持Canvas!");
    } else {
        myCanvas.log("你的瀏覽器不支持Canvas!");
    }

開始繪制

由于繪制canvas通常代碼需要比較多，我們常常使用引用js的方式來繪制canvas,這里我們也是引入js文件來操作canvas，HTML源碼如下所示

    
    
    
        
        
        
    
    
    
        您的瀏覽器不支持Canvas,請嘗試更新瀏覽器
    
    
    
    

創建js文件

根據實際的需要創建js文件,這里我引入的地址是js/canvas.js，因此需要和HTML源碼文件同級下創建js文件夾，然后再js文件夾中創建canvas.js文件。

繪制測試示例

繪制效果如下

動態效果

• 查看動態時鐘效果

預備代碼

這里保持一些全局變量，方便后面使用的

    //獲取canvas的上下文環境
    var myCanvas = document.getElementById("myCanvas")
    var ctx = myCanvas.getContext("2d")
    //獲取canvas的寬度和高度
    var canvasWidth = myCanvas.width
    var canvasHeight = myCanvas.height

繪制背景

我們首先繪制背景，分析背景可以看到，他是由一個大的黑色與圓圈包裹，里面有一個灰色的略小的圓圈，在灰色圓圈的周圍均勻分布著時鐘點，這些時鐘點每逢5的倍數的時候突出顯示，否則就是灰色顯示，這就是我們的需求，具體注釋在代碼中可以詳細看到。

    //開始繪制背景
    function drawBackground() {
        //未防止當前畫布環境被破壞,因此我們保存當前的繪制環境
        ctx.save()
        //開始繪制路徑
        ctx.beginPath()
        //配置繪制顏色,我們首先繪制的是黑色圓圈,因此我們配置為黑色
        ctx.strokeStyle = "#000000"
        //繪制寬度為6個像素
        ctx.lineWidth = 6
        //開始繪制圓,圓心未知是寬和高的一半,半徑是寬度的一半減去圓圈的寬度
        //這里最后的兩個參數需要注意
        //指的是繪制圓圈的起點和繪制的弧度
        //我們從0點開始繪制然后繪制2*PI個弧度,也就是一個正圓
        //這里的點是從x軸正方向開始的
        ctx.arc(canvasWidth/2,canvasHeight/2,canvasHeight/2-3,0,2*Math.PI)
        //配置完成,開始繪制
        ctx.stroke()

        //同樣的需求開始繪制灰色的圓圈
        ctx.beginPath()
        ctx.strokeStyle = "#CCCCCC"
        ctx.lineWidth = 1
        ctx.arc(canvasWidth/2,canvasHeight/2,(canvasWidth/2-15),0,2*Math.PI)
        ctx.stroke()

        //將原點從左上角0,0移動到中心位置
        ctx.translate(canvasWidth/2,canvasHeight/2)

        //需要現實的數字
        //這是可以看到,數字是從3開始的,也驗證了我們的之前說的繪制從x軸正方向開始
        //在時鐘界面x軸正方向就是3點鐘
        var colorNumber = [3,4,5,6,7,8,9,10,11,12,1,2]
        //配置字體和對齊方向
        ctx.font="25px Arial";
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        //循環遍歷,開始繪制數字
        for(var i = 0;i

    //繪制時針
    function drawHours(hours,minte) {
        //保存環境
        ctx.save()
        //計算時鐘角度和偏離的角度
        var rad = 2 * Math.PI / 12 * hours;
        var rad2 = 2 * Math.PI / 12 /60 * minte;
        //旋轉畫布
        ctx.rotate(rad+rad2)
        ctx.beginPath();
        //配置繪制效果
        ctx.lineWidth = 6
        ctx.strokeStyle = "#000"
        //線的兩端保持圓角
        ctx.lineCap = "round"
        //將繪制點移動到中心原點以下10個像素點
        ctx.moveTo(0,10);
        //繪制一個線
        ctx.lineTo(0,-(canvasWidth-150)/2)
        ctx.stroke()
        //恢復之前保存的環境
        ctx.restore()
    }

    //繪制分針
    function drawMinute(minute) {
        ctx.save()
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad)
        ctx.beginPath();
        ctx.lineWidth = 3
        ctx.strokeStyle = "#000"
        ctx.lineCap = "round"
        ctx.moveTo(0,10);
        ctx.lineTo(0,-(canvasWidth-100)/2)
        ctx.stroke()
        ctx.restore()
    }
    //繪制秒針
    function drawSecond(second) {
        ctx.save()
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad)
        ctx.beginPath();
        ctx.lineWidth = 3
        ctx.strokeStyle = "#f00"
        ctx.lineCap = "round"
        ctx.moveTo(0,20);
        ctx.lineTo(0,-(canvasWidth-40)/2)
        ctx.stroke()
        ctx.restore()
    }

    //繪制原點
    function drawPoint() {
        ctx.beginPath()
        ctx.fillStyle ="#FFF"
        ctx.arc(0,0,3,0,2*Math.PI)
        ctx.fill()
    }

    //開始啟動時針
    function startColor() {
        //清除畫布內容
        ctx.clearRect(0,0,canvasWidth,canvasHeight)
        var date = new Date()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var second = date.getSeconds()
        drawBackground()
        drawHours(hour,minute)
        drawMinute(minute)
        drawSecond(second)
        drawPoint()
        ctx.restore()
    }

    setInterval(startColor,1000)