猿问

不知道怎么多了一条线,求大神帮忙!



    
    canvas绘制时钟


    
        你的浏览器不支持canvas,请更换浏览器!
    
    
            (() {
                =.();
                =.();
                .=;
                .=;
                =.;
                =.;
                =/;

            () {
                .();
                .(,);
                .=;
                .(,,-,,*.);
                .();
                .();
                =[,,,,,,,,,,,];
                (=;<.;++)
                {
                    .=;
                    .=;
                    .=;
                    =*./*;
                    =(-)*.();
                    =(-)*.();
                    .([],,);
                }
                (=;<;++)
                {
                    =*./*;
                    =(-)*.();
                    =(-)*.();
                    .();
                    (%===)
                    {
                        .=;
                        .(,,,,*.);
                    }
                                       {
                        .=;
                        .(,,,,*.);
                    }
                    .();
                }
            }

             () {
                    .();
                    .=;
                    .(,,,,*.);
                    .();
                }

            (hour,minute) {
                .();
                .();
                =*./*hour+*.//*minute;
                .();
                .=;
                .=;
                .(,);
                .(,-/);
                .();
                .();
            }
                (minute) {
                    .();
                    .();
                    =*./*minute;
                    .();
                    .=;
                    .=;
                    .(,);
                    .(,-+);
                    .();
                    .();
                }
                (second) {
                    .();
                    .();
                    .=;
                    =*./*second;
                    .();
                    .(,);
                    .(-,);
                    .(-,-+);
                    .(,-+);
                    .();
                    .();
                }
                () {
                    .(,,,);
                    =Date();
                    =.();
                    =.();
                    =.();
                    ();
                    (,);
                    ();
                    ();
                    ();
                    .();
                }
                ();
            (,);

        })();


maolaixin
浏览 1362回答 3
3回答

maolaixin

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>canvas绘制时钟</title></head><body>    <canvas id="demo">        你的浏览器不支持canvas,请更换浏览器!    </canvas>    <script>            (function () {                var canvas=document.getElementById("demo");                var ctx=canvas.getContext("2d");                canvas.height=600;                canvas.width=600;                var w=canvas.width;                var h=canvas.height;                var r=w/2;            function drawBackgroud() {                ctx.save();                ctx.translate(r,r);                ctx.beginPath();                ctx.lineWidth=15;                ctx.arc(0,0,r-15,0,2*Math.PI);                ctx.closePath();                ctx.stroke();                var hoursNumber=[3,4,5,6,7,8,9,10,11,12,1,2];                for (var i=0;i<hoursNumber.length;i++)                {                    ctx.font="35px Arial";                    ctx.textAlign="center";                    ctx.textBaseline="middle";                    var rad=2*Math.PI/12*i;                    var x=(r-60)*Math.cos(rad);                    var y=(r-60)*Math.sin(rad);                    ctx.fillText(hoursNumber[i],x,y);                }                for (var i=0;i<60;i++)                {                    var rad=2*Math.PI/60*i;                    var x=(r-35)*Math.cos(rad);                    var y=(r-35)*Math.sin(rad);                    ctx.beginPath();                    if (i%5===0)                    {                        ctx.fillStyle="#000";                        ctx.arc(x,y,5,0,2*Math.PI);                    }                    else                    {                        ctx.fillStyle="#ccc";                        ctx.arc(x,y,5,0,2*Math.PI);                    }                    ctx.fill();                }            }            //绘制时针、分针、秒针            function drawDot() {                    ctx.beginPath();                    ctx.fillStyle="#fff";                    ctx.arc(0,0,5,0,2*Math.PI);                    ctx.fill();                }            function drawHour(hour,minute) {                ctx.save();                ctx.beginPath();                var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute;                ctx.rotate(rad);                ctx.lineWidth=10;                ctx.lineCap="round";                ctx.moveTo(0,20);                ctx.lineTo(0,-r/2);                ctx.stroke();                ctx.restore();            }                function drawMinute(minute) {                    ctx.save();                    ctx.beginPath();                    var rad=2*Math.PI/60*minute;                    ctx.rotate(rad);                    ctx.lineWidth=5;                    ctx.lineCap="round";                    ctx.moveTo(0,20);                    ctx.lineTo(0,-r+60);                    ctx.stroke();                    ctx.restore();                }                function drawSecond(second) {                    ctx.save();                    ctx.beginPath();                    ctx.fillStyle="red";                    var rad=2*Math.PI/60*second;                    ctx.rotate(rad);                    ctx.moveTo(2,20);                    ctx.lineTo(-2,20);                    ctx.lineTo(-1,-r+40);                    ctx.lineTo(1,-r+40);                    ctx.fill();                    ctx.restore();                }                function draw() {                    ctx.clearRect(0,0,w,h);                    var now=new Date();                    var hour=now.getHours();                    var minute=now.getMinutes();                    var second=now.getSeconds();                    drawBackgroud();                    drawHour(hour,minute);                    drawMinute(minute);                    drawSecond(second);                    drawDot();                    ctx.restore();                }                draw();            setInterval(draw,1000);        })();    </script></body></html>

西兰花伟大炮

你这是乱码的,你看看我的找找问题吧<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>画一个时钟</title>     <style>         #canvas{             margin:200px auto;             border: 1px solid #e9e0b5;             display: block;         }     </style> </head> <body> <canvas id="canvas" height="300px" width="300px"></canvas> <script>     var canvas = document.getElementById("canvas");     var ctx = canvas.getContext("2d");     var width = ctx.canvas.width;     var height = ctx.canvas.height;     var r = width /2; /*canvas绘制环境*/     function drawBackGround(ctx){         /*绘制圆框,60点,数字*/         ctx.save();         ctx.translate(r,r);         ctx.beginPath();         ctx.arc(0,0,r-5,0,Math.PI * 2);         ctx.lineWidth = 10;         ctx.stroke();         ctx.closePath();         ctx.font = "18px Arial";         ctx.textBaseline = "middle";         ctx.textAlign = "center";         var hoursNumber = [3,4,5,6,7,8,9,10,11,12,1,2];         /*传入的number为数组值,i为数组索引*/         hoursNumber.forEach(function (number,i) {             var rad = 2 * Math.PI / 12 * i;             var x = Math.cos(rad) * (r - 30);             /*cos与sin传入的是弧度值,包括rotate也是弧度,但是css中为deg*/             var y = Math.sin(rad) * (r - 30);             ctx.fillText(number,x,y);         });         for(var i= 0;i < 60;i++){             var radDot = 2 * Math.PI / 60 * i;             var x = Math.cos(radDot) * (r - 18);             var y = Math.sin(radDot) * (r - 18);             ctx.beginPath();             if(i % 5 === 0){                    ctx.arc(x,y,2,0,Math.PI *2);                     ctx.fillStyle = "#000";             }else             {                     ctx.arc(x,y,2,0,Math.PI *2);                    ctx.fillStyle = "gray";             }             ctx.fill();         }     }     function drawHour(hour,minnue){         ctx.save();         ctx.beginPath();         var rad = Math.PI * 2 / 12 *hour;         var mrad = Math.PI * 2 / 12 / 60 * minnue;         /*分针会导致时针的运动,需要加上分针引起的弧度,每分钟会导致时针变化的弧度*/         ctx.rotate(rad + mrad);         ctx.moveTo(0,10);         ctx.lineTo(0,-r + 48);         ctx.lineCap = "round";         ctx.lineWidth = 6;         ctx.stroke();         ctx.restore();     }     function drawMinute(minute){         ctx.save();         ctx.beginPath();         var rad = Math.PI * 2 / 60 * minute;         ctx.rotate(rad);         ctx.moveTo(0,10);         ctx.lineTo(0,-r + 36);         ctx.lineCap = "round";         ctx.lineWidth = 3;         ctx.stroke();         ctx.restore();     };     function drawSecond(second) {         ctx.save();         ctx.beginPath();         ctx.fillStyle = 'red';         var rad = 2 * Math.PI / 60 * second;         ctx.rotate(rad);         ctx.lineCap = 'round'         ctx.moveTo(2, 10);         ctx.lineTo(-2, 10)         ctx.lineTo(-1, -r + 18);         ctx.lineTo(1,-r+18);         ctx.fill();         ctx.restore();         /*绘制秒针时要顺着一个方向将点连接起来,不要交叉,不然会断成两截*/     }     function drawDot(){         ctx.beginPath();         ctx.fillStyle = "#fff";         ctx.arc(0,0,3,0,Math.PI * 2);         ctx.fill();         /*中间的白点*/     }     function draw(){         ctx.clearRect(0,0,width,height);         /*每秒进行一次重绘*/         var now = new Date();         var hour = now.getHours();         var minute = now.getMinutes();         var second = now.getSeconds();         drawBackGround(ctx);         drawHour(hour,minute);         drawMinute(minute);         drawSecond(second);         drawDot();         ctx.restore()     }     draw();     setInterval(draw,1000); </script> </body> </html>
随时随地看视频慕课网APP

相关分类

Html5
我要回答