日本精品无码一区二区三区久久久,99久久国产综合色婷婷,7777精品伊人久久久大香线蕉,人人妻人人澡人人爽人人dvd,久久精品中文字幕

使用html5的canvas和js來(lái)實(shí)現(xiàn)時(shí)鐘效果

開(kāi)發(fā)技術(shù) 2016/10/15

<canvas id="mycanvas" width="600" height="500" style="border: 1px solid #ccc; margin-top: 50px; margin-left: 300px;"></canvas>
<script>
    clock();
    run();             //加載頁(yè)面時(shí)啟動(dòng)定時(shí)器
    var interval;     //定義一個(gè)定時(shí)器
    function run() {
        interval = setInterval(clock, "1000");   //定時(shí)的設(shè)置
    }
    function clock(){
        x0 = 300;
        y0 = 200; //表位置
        r = 150;  //表半徑
        var mycanvas = document.getElementById('mycanvas');
        var t = mycanvas.getContext("2d");
        mycanvas.height=mycanvas.height;
        //畫(huà)圓
        t.beginPath();
        t.strokeStyle = "#f00";
        t.arc(x0,y0,r,0,2*Math.PI,true);
        t.stroke();
        t.closePath();

        //畫(huà)中心點(diǎn)
        t.beginPath();
        t.arc(x0,y0,8,0,2*Math.PI,true);
        t.fillStyle="#f00";
        t.fill();
        t.closePath();

        //畫(huà)表盤(pán)
        for(i=0;i<=60;i++){
            t.beginPath();
            t.strokeStyle="#f00";
            if(i % 15 == 0){ //當(dāng)0,3,6,9時(shí)加最粗
                w0 = x0 + (r - 15) * Math.cos(i * 6 * Math.PI / 180);
                h0 = y0 + (r - 15) * Math.sin(i * 6 * Math.PI / 180);
                t.lineWidth = 5;
            }else {
                if (i % 5 == 0) { //每小時(shí)時(shí)加粗
                    w0 = x0 + (r - 10) * Math.cos(i * 6 * Math.PI / 180);
                    h0 = y0 + (r - 10) * Math.sin(i * 6 * Math.PI / 180);
                    t.lineWidth = 2;
                } else { //其他時(shí)間
                    w0 = x0 + (r - 5) * Math.cos(i * 6 * Math.PI / 180);
                    h0 = y0 + (r - 5) * Math.sin(i * 6 * Math.PI / 180);
                    t.lineWidth = 1;
                }
            }
            t.moveTo(w0,h0);
            w1 = x0 + r * Math.cos(i*6*Math.PI/180);
            h1 = y0 + r * Math.sin(i*6*Math.PI/180);
            t.lineTo(w1,h1);
            t.stroke();
            t.closePath();
        }

        var d = new Date();
        h = d.getHours();
        m = d.getMinutes();
        s = d.getSeconds();

        //畫(huà)時(shí)針
        t.beginPath();
        t.strokeStyle="#f00";
        t.moveTo(x0,y0);
        t.lineWidth = 8;
        t1 = (h/12+m/60/12+s/60/60/12)*360-90;
        w1 = x0 +  50*Math.cos(t1*Math.PI/180);
        h1 = y0 +  50*Math.sin(t1*Math.PI/180);
        t.lineTo(w1,h1);
        t.stroke();
        t.closePath();

        //畫(huà)分針
        t.beginPath();
        t.strokeStyle="#f00";
        t.moveTo(x0,y0);
        t.lineWidth = 5;
        t1 = (m/60+s/60/60)*360-90;
        w1 = x0 +  80*Math.cos(t1*Math.PI/180);
        h1 = y0 + 80*Math.sin(t1*Math.PI/180);
        t.lineTo(w1,h1);
        t.stroke();
        t.closePath();

        //畫(huà)秒針
        t.beginPath();
        t.strokeStyle="#f00";
        t.moveTo(x0,y0);
        t.lineWidth = 1;
        t1 = (s/60)*360-90;
        w1 = x0 +  120*Math.cos(t1*Math.PI/180);
        h1 = y0 + 120*Math.sin(t1*Math.PI/180);
        t.lineTo(w1,h1);
        t.stroke();
        t.closePath();
    }
</script>

中國(guó)· 上海

谷谷二維碼
添加微信咨詢

CopyRight?2009-2019 上海谷谷網(wǎng)絡(luò)科技有限公司 All Rights Reserved. 滬ICP備11022482號(hào)-8  

關(guān)于我們 | 聯(lián)系我們