javascript結合Canvas 實作簡易的圓形時脈_javascript技巧

之前學習了下html5中的canvas元素，為了練練手就實現了一個簡易的時鐘。時鐘本身並不複雜，也沒有使用圖片來美化，不過麻雀雖小五臟俱全，下面就與大家分享一下：

示範效果：

html代碼：

複製程式碼 程式碼如下:

   
   
   

JS代碼:

複製程式碼 程式碼如下:

var Canvas = {};
Canvas.cxt = document.getElementById('canvasId').getContext('2d');
Canvas.Point = function(x, y){
    this.x = x;
    this.y = y;
};
/*擦除canvas上的所有圖形*/
Canvas.clearCxt = function(){
    var me = this;
    var canvas = me.cxt.canvas;
       me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
};
/*時鐘*/
Canvas.Clock = function(){
    var me = Canvas,
        c = me.cxt,
        radius = 150, /*半徑*/
        scale = 20, /*刻度長度*/
        minangle = (1/30)*Math.PI, /*一分鐘的弧度*/
        hourangle = (1/6)*Math.PI, /*一小時的弧度*/
        hourHandLength = radius/2, /*時針長度*/
        minHandLength = radius/3*2, /*分針長度*/
        secHandLength = radius/10*9, /*秒針長度*/
        center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圓心*/
    /*繪製圓心（錶盤中心）*/
    function drawCenter(){
        c.save();
        c.translate(center.x, center.y);
        c.fillStyle = 'black';
        c.beginPath();
        c.arc(0, 0, radius/20, 0, 2*Math.PI);
        c.closePath();
        c.fill();
        c.stroke();
        c.restore();
    };
    /*透過座標變換繪製錶盤*/
    function drawBackGround(){
        c.save();
        c.translate(center.x, center.y); /*平移變換*/
        /*繪製刻度*/
        function drawScale(){
           c.moveTo(radius - scale, 0);
           c.lineTo(radius, 0);
        };
        c.beginPath();
        c.arc(0, 0, radius, 0, 2*Math.PI, true);
        c.closePath();
        for (var i = 1; i            drawScale();
           c.rotate(hourangle); /*旋轉變換*/
        };
        /*繪製時間(3,6,9,12)*/
        c.font = " bold 30px impack"
        c.fillText("3", 110, 10);
        c.fillText("6", -7, 120);
        c.fillText("9", -120, 10);
        c.fillText("12", -16, -100);
        c.stroke();
        c.restore();
    };
    /*繪製時針(h: 目前時（24小時制）)*/
    this.drawHourHand = function(h){
        h = h === 0? 24: h;
        c.save();
        c.translate(center.x, center.y);
        c.rotate(3/2*Math.PI);
        c.rotate(h*hourangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(hourHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*繪製分針（m: 目前分）*/
    this.drawMinHand = function(m){
        m = m === 0? 60: m;
        c.save();
        c.translate(center.x, center.y);
        c.rotate(3/2*Math.PI);
        c.rotate(m*minangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(minHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*繪製秒針（s：當前秒）*/
    this.drawSecHand = function(s){
        s = s === 0? 60: s;
        c.save();
        c.translate(center.x, center.y);
        c.rotate(3/2*Math.PI);
        c.rotate(s*minangle);
        c.beginPath();
        c.moveTo(0, 0);
        c.lineTo(secHandLength, 0);
        c.stroke();
        c.restore();
    };
    /*依據本機時間繪製時鐘*/
    this.drawClock = function(){
        var me = this;
        function draw(){
           var date = new Date();
           Canvas.clearCxt();
           drawBackGround();
           drawCenter();
           me.drawHourHand(date.getHours() date.getMinutes()/60);
           me.drawMinHand(date.getMinutes() date.getSeconds()/60);
           me.drawSecHand(date.getSeconds());
        }
        draw();
        setInterval(draw, 1000);
    }; 
};
 var main = function(){
    var clock = new Canvas.Clock();
    clock.drawClock();
};

程式碼中涉及了一些簡單的canvas元素API 大家度娘一下即可

以上就是本文的全部內容了，希望對大家學習canvas能夠有所幫助。