canvas如何繪製時鐘？ canvas畫環形時鐘的實作過程

canvas是html5中新增的元素，可用來在網頁上來繪製圖像，既然可以用於畫圖，那麼自然可以來畫一個環形的時鐘，所以，接下來的這篇文章將給大家來分享關於如何利用canvas繪製環形時鐘的方法。

首先我們要知道的是環形時鐘的組成形狀是畫一個圓還有刻度，然後還有時針分針秒針，然後就是用定時器讓針動起來。

然後我們就根據環形時鐘的組成來利用canvas繪製出時鐘。

我們先來看看畫環形時鐘所需的函數。

1、圓形：canvas.arc(x,y,r,0,2*Math.PI);

2、 圓角的線條：canvas.lineCap = "round";

3、文字：canvas.font、canvas.textBaseline、canvas.textAlign;/

4、擦除：canvas.clearRect(x,y,w,h) 。

知道了繪製環形時鐘所需的基本函數與組成後，我們就繼續來說關於canvas繪製環形時鐘的步驟。

一、先繪製需要在文件載入完成後開始，setInterval()實作幀動畫，這裡和寫canvas小遊戲的套路是一樣的，以一定速度重複繪製-擦除。

程式碼如下：

<canvas id="canvas" width="300px" height="300px">您的浏览器不支持canvas</canvas>

// 加载后开始
document.body.onload = start;
function start(){
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;
    var r = width/2; //半径
    function render(){
        /*
            画钟表静态的元件
         */
    }
    function drawGuid(){
        /*
            画钟表指针
         */
        var now = new Date();
        h = now.getHours();
        m =now.getMinutes();
        s = now.getSeconds();
        drawHour(h,m);
        drawMinute(m,s);
        drawSecond(s);
    }
    setInterval(function(){
        render();
        drawGuid();
    },30/1000)
}

說明：每一幀都先用canvas.clearRect(x,y,w,h)擦掉畫布上的像素，否則會造成目前像素和之前的像素疊加的問題。將畫布的原點移到畫布的中心，有助於繪製刻度和以中心為基點旋轉的指針，在之前得保存平移之前的環境狀態。

二、 每隔6度角畫一個刻度，每隔30度畫一個大刻度，因為原點被移到中心，利用JavaScript自帶的函數（Math.sin(deg)、 Math.cos(deg)）得到刻度的x、y座標，注意將角度轉換為弧度。

程式碼如下：

function render(){
    cxt.clearRect(0,0,width,height);
    cxt.save();
    cxt.translate(width/2,height/2);
    // 画轮廓
    cxt.beginPath();
    cxt.lineWidth = r*0.05;//轮廓圆宽度
    cxt.strokeStyle = "#333";//轮廓圆颜色
    cxt.arc(0,0,r-r*0.05,0,2*Math.PI); //圆
    cxt.stroke();
    cxt.closePath();
    // 画内圆
    cxt.beginPath();
    cxt.lineWidth = 1;
    var radi2 = r*0.85; //半径
    cxt.arc(0,0,radi2,0,2*Math.PI); //圆
    cxt.stroke();
    cxt.closePath();
    // 画刻度 使用Math.sin(deg)、Math.cos(deg)来计算圆上点的坐标
    // 每隔6度画一个点
    var hour = [6,5,4,3,2,1,12,11,10,9,8,7],i = 0;
    for(var deg = 0;deg<360;deg=deg+6){
        var spotX = radi2*Math.sin(deg*2*Math.PI/360);
        var spotY = radi2*Math.cos(deg*2*Math.PI/360);
        var spot = r*0.02; //刻度半径
        cxt.beginPath();
        cxt.fillStyle = "#ccc";
        if(deg%30==0){
            cxt.fillStyle = "#333";
            spot = r*0.025;
            var textX =(radi2*0.85)*Math.sin(deg*2*Math.PI/360); //文字x坐标
            var textY =(radi2*0.85)*Math.cos(deg*2*Math.PI/360); //文字y坐标
            cxt.font = r*0.1 + "px Arial"; 
            cxt.textBaseline = "middle";// 文字垂直对齐方式
            cxt.textAlign = "center";   // 文字水平对齐方式
            cxt.fillText(hour[i],textX,textY);
            i++;
        }
        cxt.arc(spotX,spotY,spot,0,2*Math.PI);
        cxt.fill();
        cxt.closePath();
    }
    // 画中心
    cxt.beginPath();
    cxt.arc(0,0,r*0.05,0,2*Math.PI);
    cxt.stroke();
    cxt.closePath();
}

#三、時針、分針、秒針的做法是一致的，使用canvas.rotate()繞原點旋轉，旋轉前都要canvas .save()保存當前狀態（指針的每一幀動作都是讓畫布旋轉特定的角度，所以畫完一次要擺正一次畫布，否則秒針旋轉一次，分針會在此基礎上旋轉）。

程式碼如下：

function drawHour(h,m){
    // 时针
    h = h + m/60;
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/12*h);
    cxt.lineWidth = r*0.05;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.4*0.2);
    cxt.lineTo(0,-r*0.4*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
function drawMinute(m,s){
    // 分针
    m = m + s/60;
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/60*m);
    cxt.lineWidth = 3;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.6*0.2);
    cxt.lineTo(0,-r*0.6*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}
function drawSecond(s){
    // 秒针
    cxt.save();
    cxt.beginPath();
    cxt.rotate(2*Math.PI/60*s);
    cxt.strokeStyle = "#ff004f";
    cxt.lineWidth = 1;
    cxt.lineCap = "round";
    cxt.moveTo(0,r*0.8*0.2);
    cxt.lineTo(0,-r*0.8*0.8);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
}

注意：canvas.save()儲存目前的畫布狀態到堆疊裡，canvas.restore()取出堆疊裡儲存的狀態，屬於先進後出，所以canvas.restore()取的是最近一次的存檔。

四、繪製一次要呼叫之前儲存過的環境。

程式碼如下：

setInterval(function(){
    render();
    drawGuid();
    cxt.restore();
},30/1000)

最後關於ca​​nvas中更多的內容可以參考HTML5開發手冊。

以上是canvas如何繪製時鐘？ canvas畫環形時鐘的實作過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！