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

Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動(dòng)畫等。
沒(méi)有Canvas的年代，繪圖只能借助Flash插件實(shí)現(xiàn)，頁(yè)面不得不用JavaScript和Flash進(jìn)行交互。有了Canvas，我們就再也不需要Flash了，直接使用JavaScript完成繪制。

基本使用

在html源碼中只要像普通標(biāo)簽?zāi)菢邮褂眉纯桑热缦旅娴氖纠?，但是在一些老舊的瀏覽器在中是不支持canvas的，因此我們常在canvas標(biāo)簽中提示用戶，具體代碼如下所示。

    
        您的瀏覽器不支持canvas,請(qǐng)嘗試更新瀏覽器
    

或者使用JS腳本來(lái)進(jìn)行檢測(cè)，使用JavaScript代碼檢測(cè)是否支持canvas的代碼示例如下：

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

開始繪制

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

    
    
    
        
        
        
    
    
    
        您的瀏覽器不支持Canvas,請(qǐng)嘗試更新瀏覽器
    
    
    
    

創(chuàng)建js文件

根據(jù)實(shí)際的需要?jiǎng)?chuàng)建js文件,這里我引入的地址是js/canvas.js，因此需要和HTML源碼文件同級(jí)下創(chuàng)建js文件夾，然后再js文件夾中創(chuàng)建canvas.js文件。

繪制測(cè)試示例

繪制效果如下

動(dòng)態(tài)效果

• 查看動(dòng)態(tài)時(shí)鐘效果

預(yù)備代碼

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

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

繪制背景

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

    //開始繪制背景
    function drawBackground() {
        //未防止當(dāng)前畫布環(huán)境被破壞,因此我們保存當(dāng)前的繪制環(huán)境
        ctx.save()
        //開始繪制路徑
        ctx.beginPath()
        //配置繪制顏色,我們首先繪制的是黑色圓圈,因此我們配置為黑色
        ctx.strokeStyle = "#000000"
        //繪制寬度為6個(gè)像素
        ctx.lineWidth = 6
        //開始繪制圓,圓心未知是寬和高的一半,半徑是寬度的一半減去圓圈的寬度
        //這里最后的兩個(gè)參數(shù)需要注意
        //指的是繪制圓圈的起點(diǎn)和繪制的弧度
        //我們從0點(diǎn)開始繪制然后繪制2*PI個(gè)弧度,也就是一個(gè)正圓
        //這里的點(diǎn)是從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()

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

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

    //繪制時(shí)針
    function drawHours(hours,minte) {
        //保存環(huán)境
        ctx.save()
        //計(jì)算時(shí)鐘角度和偏離的角度
        var rad = 2 * Math.PI / 12 * hours;
        var rad2 = 2 * Math.PI / 12 /60 * minte;
        //旋轉(zhuǎn)畫布
        ctx.rotate(rad+rad2)
        ctx.beginPath();
        //配置繪制效果
        ctx.lineWidth = 6
        ctx.strokeStyle = "#000"
        //線的兩端保持圓角
        ctx.lineCap = "round"
        //將繪制點(diǎn)移動(dòng)到中心原點(diǎn)以下10個(gè)像素點(diǎn)
        ctx.moveTo(0,10);
        //繪制一個(gè)線
        ctx.lineTo(0,-(canvasWidth-150)/2)
        ctx.stroke()
        //恢復(fù)之前保存的環(huán)境
        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()
    }

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

    //開始啟動(dòng)時(shí)針
    function startColor() {
        //清除畫布內(nèi)容
        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)