WordPress database error: [Table './ay6u3nor6dat6ba1/kn6_ayu1n9k4_5_actionscheduler_actions' is marked as crashed and last (automatic?) repair failed]
SELECT a.action_id FROM kn6_ayu1n9k4_5_actionscheduler_actions a WHERE 1=1 AND a.hook='aioseo_send_usage_data' AND a.status IN ('in-progress') ORDER BY a.scheduled_date_gmt ASC LIMIT 0, 1

WordPress database error: [Table './ay6u3nor6dat6ba1/kn6_ayu1n9k4_5_actionscheduler_actions' is marked as crashed and last (automatic?) repair failed]
SELECT a.action_id FROM kn6_ayu1n9k4_5_actionscheduler_actions a WHERE 1=1 AND a.hook='aioseo_send_usage_data' AND a.status IN ('pending') ORDER BY a.scheduled_date_gmt ASC LIMIT 0, 1

Analog Clock HTML5 Canvas | Loop and Break

Analog Clock HTML5 Canvas

by · March 23, 2013

Following listing shows Analog Clock in HTML 5, Tested with Mozilla, Chrome and Safari

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas tutorial</title>
        <script>
            function init(){
                clock();
                setInterval(clock, 1000);
            }

            function clock(){
                var now = new Date();
                var ctx = document.getElementById('canvas').getContext('2d');
                ctx.save();
                ctx.clearRect(0, 0, 150, 150);
                ctx.translate(75, 75);
                ctx.scale(0.4, 0.4);
                ctx.rotate(-Math.PI / 2);
                ctx.strokeStyle = "black";
                ctx.fillStyle = "white";
                ctx.lineWidth = 8;
                ctx.lineCap = "round";

                // Hour marks
                ctx.save();
                for (var i = 0; i < 12; i++) {
                    ctx.beginPath();
                    ctx.rotate(Math.PI / 6);
                    ctx.moveTo(100, 0);
                    ctx.lineTo(120, 0);
                    ctx.stroke();
                }
                ctx.restore();

                // Minute marks
                ctx.save();
                ctx.lineWidth = 5;
                for (i = 0; i < 60; i++) {
                    if (i % 5 != 0) {
                        ctx.beginPath();
                        ctx.moveTo(117, 0);
                        ctx.lineTo(120, 0);
                        ctx.stroke();
                    }
                    ctx.rotate(Math.PI / 30);
                }
                ctx.restore();

                var sec = now.getSeconds();
                var min = now.getMinutes();
                var hr = now.getHours();
                hr = hr >= 12 ? hr - 12 : hr;

                ctx.fillStyle = "black";

                // write Hours
                ctx.save();
                ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) *
                min + (Math.PI / 21600) * sec)
                ctx.lineWidth = 14;
                ctx.beginPath();
                ctx.moveTo(-20, 0);
                ctx.lineTo(80, 0);
                ctx.stroke();
                ctx.restore();

                // write Minutes
                ctx.save();
                ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
                ctx.lineWidth = 10;
                ctx.beginPath();
                ctx.moveTo(-28, 0);
                ctx.lineTo(112, 0);
                ctx.stroke();
                ctx.restore();

                // Write seconds
                ctx.save();
                ctx.rotate(sec * Math.PI / 30);
                ctx.strokeStyle = "#D40000";
                ctx.fillStyle = "#D40000";
                ctx.lineWidth = 6;
                ctx.beginPath();
                ctx.moveTo(-30, 0);
                ctx.lineTo(83, 0);
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
                ctx.stroke();
                ctx.fillStyle = "rgba(0,0,0,0)";
                ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
                ctx.fill();
                ctx.restore();

                ctx.beginPath();
                ctx.lineWidth = 14;
                ctx.strokeStyle = '#325FA2';
                ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
                ctx.stroke();

                ctx.restore();
            }
        </script>
    </head>
    <body onload="init();">
        <canvas id="canvas" width="200" height="200">
        </canvas>
    </body>
</html>

Output

Untitled

Share

You may also like...

Categories