97se亚洲综合在线,97成人碰碰久久人人超级碰oo,东京热人妻一区二区三区,狠狠色婷婷久久一区二区

使用html5的canvas和js來實現(xiàn)時鐘效果

開發(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();             //加載頁面時啟動定時器
    var interval;     //定義一個定時器
    function run() {
        interval = setInterval(clock, "1000");   //定時的設(shè)置
    }
    function clock(){
        x0 = 300;
        y0 = 200; //表位置
        r = 150;  //表半徑
        var mycanvas = document.getElementById('mycanvas');
        var t = mycanvas.getContext("2d");
        mycanvas.height=mycanvas.height;
        //畫圓
        t.beginPath();
        t.strokeStyle = "#f00";
        t.arc(x0,y0,r,0,2*Math.PI,true);
        t.stroke();
        t.closePath();

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

        //畫表盤
        for(i=0;i<=60;i++){
            t.beginPath();
            t.strokeStyle="#f00";
            if(i % 15 == 0){ //當(dāng)0,3,6,9時加最粗
                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) { //每小時時加粗
                    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 { //其他時間
                    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();

        //畫時針
        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();

        //畫分針
        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();

        //畫秒針
        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>

中國· 上海

谷谷二維碼
添加微信咨詢

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

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