嵇爾的吐槽

#没事画轮子的嵇尔不定期的(W)碎(E)碎(B)念(B)和(L)吐(O)槽(G)

关于某些的小工具(扩展) 2017-08-10 20:11:16

上回小工具的扩展

   
       
   
   

源代码

<script type="text/javascript">
   function clock(week, day, canvas) {
        var now = new Date();
        var ctx = document.getElementById(canvas).getContext('2d');
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.fillStyle = 'white';
        ctx.arc(150, 150, 145, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();

        ctx.beginPath();
        ctx.arc(150, 150, 145, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(150, 150, 115, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(150, 150, 85, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150, 150);
        ctx.rotate(-Math.PI/2);
        for (var i = 0; i < 40; i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/20);
            ctx.moveTo(115,0);
            ctx.lineTo(85,0);
            ctx.stroke();
        }

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150, 150);
        ctx.rotate(-Math.PI/2);
        for (var i = 0; i < 7; i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/3.5);
            ctx.moveTo(145,0);
            ctx.lineTo(115,0);
            ctx.stroke();
            
        }

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150,150);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.rotate((week + day / 7) * Math.PI / 20);
        ctx.moveTo(-15,0);
        ctx.lineTo(100,0);
        ctx.stroke();

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150,150);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "black";
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.rotate((day + (now.getHours() * 60 * 60 + now.getMinutes() * 60 + now.getSeconds())/( 24 * 60 * 60 )) * Math.PI/3.5);
        ctx.moveTo(-15,0);
        ctx.lineTo(130,0);
        ctx.stroke();

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150,150);
        ctx.rotate(-Math.PI/2);
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.beginPath();
        ctx.arc(150, 150, 10, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();
    }
</script>
评论共