html5canvas画时钟








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



分享题目:html5canvas画时钟
网页链接:http://bzwzjz.com/article/jehjci.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 企业手机网站建设 手机网站建设套餐 网站制作 重庆企业网站建设 四川成都网站建设 营销型网站建设 网站制作 手机网站设计 成都网站制作 网站制作 手机网站制作 定制网站制作 重庆电商网站建设 阿坝网站设计 成都企业网站建设公司 网站建设公司 成都网站设计 响应式网站设计方案 外贸网站设计方案 成都网站设计 定制级高端网站建设 成都营销网站制作