中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5 canvas 畫時鐘

發布時間:2020-02-26 12:50:17 來源:網絡 閱讀:461 作者:antlove 欄目:移動開發
<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="400" height="400" ></canvas>

<script type="text/javascript">
    // get the canvas
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");

    function showClock(){
        ctx.save();
        ctx.save();
        ctx.save();
        ctx.save();
        ctx.save();
        ctx.save();
        ctx.save();
        ctx.clearRect(0,0,400,400);

        // create the clock border
        ctx.restore();
        ctx.beginPath();
        ctx.strokeStyle="pink";
        ctx.lineWidth=10;
        ctx.arc(200,200,150,0,Math.PI*2,true);
        ctx.stroke();


        // create the hour icon
        ctx.restore();
        ctx.lineWidth=8;
        ctx.strokeStyle="blue";
        ctx.translate(200,200);
        for(var i=0;i<12;i++){
          ctx.beginPath();      
          ctx.moveTo(135,0);
          ctx.lineTo(150,0);
          ctx.rotate(Math.PI/6);
          ctx.stroke();
        }

        // create the minute icon
        ctx.restore();
        ctx.lineWidth=4;
        ctx.strokeStyle="blue";
        ctx.translate(200,200);
        for(var i=0;i<60;i++){
          ctx.beginPath();      
          ctx.moveTo(145,0);
          ctx.lineTo(150,0);
          ctx.rotate(Math.PI/30);
          ctx.stroke();
        }

        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        hour = hour>=12?hour-12:hour;
        
        // create the hour hand
        ctx.restore();
        ctx.lineWidth = 14;
        ctx.strokeStyle="pink";
        ctx.translate(200,200);
        ctx.rotate(hour*(Math.PI/6) + (Math.PI/360)*minute + (Math.PI/21600)*second-Math.PI/2);
        ctx.beginPath();      
        ctx.moveTo(-20,0);
        ctx.lineTo(90,0);     
        ctx.stroke();
       

        // create the minute hand
        ctx.restore();
        ctx.lineWidth = 10;
        ctx.strokeStyle="pink";
        ctx.translate(200,200);
        ctx.rotate((Math.PI/30)*minute + (Math.PI/1800)*second-Math.PI/2);
        ctx.beginPath();      
        ctx.moveTo(-30,0);
        ctx.lineTo(125,0);     
        ctx.stroke();

        // create the second hand
        ctx.restore();
        ctx.lineWidth = 4;
        ctx.strokeStyle="pink";
        ctx.translate(200,200);
        ctx.rotate( (Math.PI/30)*second-Math.PI/2);
        ctx.beginPath();      
        ctx.moveTo(-35,0);
        ctx.lineTo(135,0);     
        ctx.stroke();

        ctx.restore();
        setTimeout(showClock,1000);
    }

showClock();
</script>
</body>
</html>


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

临潭县| 宜兰市| 长岛县| 三穗县| 广东省| 长子县| 突泉县| 瓮安县| 新乡县| 达日县| 长兴县| 台北市| 孝感市| 报价| 绍兴县| 泾川县| 乌兰察布市| 广州市| 天全县| 商洛市| 布尔津县| 苏州市| 姜堰市| 五常市| 根河市| 彰化县| 昂仁县| 潮安县| 朔州市| 韩城市| 砀山县| 山西省| 宜宾县| 都昌县| 双柏县| 郸城县| 嘉义市| 唐河县| 博客| 巩义市| 松潘县|