Tiện ích đồng hồ kim treo tường cho blogspot kiểu 1

 

Tiện ích đồng hồ kim treo tường cho blogspot kiểu 1

1/ Vào Bố cục blog, thêm tiện ích HTML/JavaScript, nhập "Đồng Hồ" vào khung Tiêu đề (hoặc nhập Tiêu đề khác tùy ý), coppy code dưới đây dán vào khung Nội dung của tiện ích.

<!--- Đồng Hồ --->

<center><canvas id="canvas" width="200px" height="200px" style="border: 1px solid"></canvas></center>

<script>

    const ONE_RADIAN = Math.PI/180;

    const CLOCK_RADIUS = 100;

    const SECOND_HAND_SIZE = CLOCK_RADIUS * 0.9;

    const MINUTE_HAND_SIZE = CLOCK_RADIUS * 0.7;

    const HOUR_HAND_SIZE = CLOCK_RADIUS * 0.5;

    var cx;

    var cy;

    var canvas;

    var context;

    var _animationFrame;

    var _startTime;

   function loop(time) {

        var diffTime = Math.abs(time - _startTime);

        if(diffTime >= 1000)

        {

            update();

            _startTime = time;

        }

         _animationFrame(loop);

    }

    // draw a line from {x1, y1} to {x2,y2}

    function drawLine(x1,y1,x2,y2,lineWidth,color){

         context.save();

        context.lineWidth = lineWidth;

        if(color)

            context.strokeStyle = color;

        context.beginPath();

        context.moveTo(x1,y1);

        context.lineTo(x2, y2);

        context.closePath();

        context.stroke();

        context.restore();

    }

    // draw a circle with the center at {cx, cy}

    function drawCircle(cx,cy,radius){

        context.beginPath();

        context.arc(cx,cy, radius, 0, Math.PI*2, true);

        context.closePath();

        context.fill();

    }

     function update(){

         context.clearRect(0, 0, canvas.width, canvas.height);

         // draw clock dial

        drawCircle(cx,cy,4);

         for(var i=0;i<60;i++){

            var angle = 6*i*ONE_RADIAN;

            var x = cx + Math.cos(angle)*CLOCK_RADIUS;

            var y = cy + Math.sin(angle)*CLOCK_RADIUS;

            var radius = 1;

            if(i%5==0)

            {

                radius = 3;

                var hour = (i/5+3)%12;

                if(hour == 0)

                    hour = 12;

                 // text width

                var tw = context.measureText(hour).width;

                // text location

                var tx = cx + Math.cos(angle)*SECOND_HAND_SIZE-tw/2;

                var ty = cy + Math.sin(angle)*SECOND_HAND_SIZE+6;

                 context.fillText(hour,tx,ty);

            }

             drawCircle(x,y,radius);

        }

        // draw clock hands ////////////////////////////////////

         var now = new Date();

        var hours = now.getHours();

        var minutes = now.getMinutes();

        var seconds = now.getSeconds();

         // second hand

        var angle = ONE_RADIAN*seconds*6;

        var x = cx + Math.sin(angle)*SECOND_HAND_SIZE;

        var y = cx - Math.cos(angle)*SECOND_HAND_SIZE;

        drawLine(cx,cy,x,y,1);

         // minute hand

        angle = ONE_RADIAN*minutes*6;

        x = cx + Math.sin(angle)*MINUTE_HAND_SIZE;

        y = cx - Math.cos(angle)*MINUTE_HAND_SIZE;

        drawLine(cx,cy,x,y,2,"blue");

         // hour hand

        angle = ONE_RADIAN * (hours+minutes/60)*30;

        x = cx + Math.sin(angle)*HOUR_HAND_SIZE;

        y = cx - Math.cos(angle)*HOUR_HAND_SIZE;

        drawLine(cx,cy,x,y,4,"#900000");

    }

     window.onload = function(){

        canvas  = document.getElementById("canvas");

        context = canvas.getContext("2d");

        context.font = "14px Arial";

        cx = canvas.width/2;

        cy = canvas.height/2;

        _animationFrame = window.requestAnimationFrame  ||

                    window.mozRequestAnimationFrame     ||

                    window.webkitRequestAnimationFrame  ||

                    window.msRequestAnimationFrame      ||

                    window.oRequestAnimationFrame       ;

         if(_animationFrame)

        {

            _startTime = Date.now();

            _animationFrame(loop);

        }

        else

            alert("Your browser don't support requestAnimationFrame.");

    };

  </script>

2/ Nhấp Lưu tiện ích, kéo và thả tiện ích vào vị trí tùy ý. Nhấp lưu Bố cục và xem blog để xem kết quả.

Nguồn: 

https://yinyangit.wordpress.com/2012/03/19/html5-canvas-ve-dong-ho-kim-analog-clock/