日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

之前學(xué)習(xí)了下html5中的canvas元素，為了練練手就實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的時(shí)鐘。時(shí)鐘本身并不復(fù)雜，也沒(méi)有使用圖片進(jìn)行美化，不過(guò)麻雀雖小五臟俱全，下面就與大家分享一下：

團(tuán)風(fēng)網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,團(tuán)風(fēng)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為團(tuán)風(fēng)上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的團(tuán)風(fēng)做網(wǎng)站的公司定做！

實(shí)現(xiàn)效果：

html代碼：

 
 

  
  
 
  
  
 
  
  
 
  
  
     
  
  
     
  
  
     
  
  
    *{ 
  
  
        margin: 0; 
  
  
        padding: 0; 
  
  
    } 
  
  
    .canvas{ 
  
  
        margin-left: 20px; 
  
  
        margin-top: 20px; 
  
  
        border: solid 1px; 
  
  
    } 
  
  
     
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
 
 

 

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); 
  
  
}; 
  
  
 
  
  
/*時(shí)鐘*/ 
  
  
Canvas.Clock = function(){ 
  
  
    var me = Canvas, 
  
  
        c = me.cxt, 
  
  
        radius = 150, /*半徑*/ 
  
  
        scale = 20, /*刻度長(zhǎng)度*/ 
  
  
        minangle = (1/30)*Math.PI, /*一分鐘的弧度*/ 
  
  
        hourangle = (1/6)*Math.PI, /*一小時(shí)的弧度*/ 
  
  
        hourHandLength = radius/2, /*時(shí)針長(zhǎng)度*/ 
  
  
        minHandLength = radius/3*2, /*分針長(zhǎng)度*/ 
  
  
        secHandLength = radius/10*9, /*秒針長(zhǎng)度*/ 
  
  
        center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圓心*/ 
  
  
    
  
  
    /*繪制圓心（表盤(pán)中心）*/ 
  
  
    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(); 
  
  
    }; 
  
  
 
  
  
    /*通過(guò)坐標(biāo)變換繪制表盤(pán)*/ 
  
  
    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 <= 12; i++) { 
  
  
           drawScale(); 
  
  
           c.rotate(hourangle); /*旋轉(zhuǎn)變換*/ 
  
  
        }; 
  
  
        /*繪制時(shí)間(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(); 
  
  
    }; 
  
  
 
  
  
    /*繪制時(shí)針(h: 當(dāng)前時(shí)（24小時(shí)制）)*/ 
  
  
    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: 當(dāng)前分）*/ 
  
  
    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：當(dāng)前秒）*/ 
  
  
    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(); 
  
  
    }; 
  
  
 
  
  
    /*依據(jù)本機(jī)時(shí)間繪制時(shí)鐘*/ 
  
  
    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(); 
  
  
}; 
 
 

 

代碼中涉及到了一些簡(jiǎn)單的canvas元素API 大家google一下即可，祝大家學(xué)習(xí)愉快:-D

網(wǎng)頁(yè)名稱：詳解通過(guò)Canvas+JS實(shí)現(xiàn)簡(jiǎn)易的時(shí)鐘
文章地址：http://www.dlmjj.cn/article/dhcdigg.html