Canvas painting with a clock

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000"
    style="border:1px solid #000000;">您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var c =document.querySelector('#myCanvas ' );
     // identify and specify the context of the canvas 
    var CTX = c.getContext ( ' 2D ' ); 

    // 1. dial 
    ctx.lineWidth = 10 ; 
    ctx.stroeStyle = ' # 000 ' ; 
    ctx.beginPath (); 
    ctx.arc ( 250 , 250 , 200 is , 0 , 360 , to false ); 
    ctx.stroke () 
    ctx.closePath () 
    // scale
         //      time of 
        for ( var I =0 ; I < 12 is ; I ++ ) { 
            ctx.save (); 
            ctx.lineWidth = . 8 ; 
            ctx.strokeStyle = ' Orange ' ;
                 // set point position 0,0 
                ctx.translate ( 250 , 250 );
                 // Sets the rotation angle 
                ctx.rotate (I * 30 * Math.PI / 180 [ ); 

                ctx.beginPath (); 
                ctx.moveTo ( 0 , 170. ); 
                ctx.lineTo ( 0 ,190 ); 
                ctx.stroke (); 
                ctx.closePath (); 
                ctx.restore () 
            } 
        // sub-scale 
        for ( var I = 0 ; I < 60 ; I ++ ) { 
            ctx.save (); 
            ctx.lineWidth = 4.5 of 5 ; 
            ctx.strokeStyle = ' Orange ' ;
                 // set point position 0,0 
                ctx.translate ( 250 , 250 );
                 // set the rotation angle
                ctx.rotate(i*6*Math.PI/180);

                ctx.beginPath();
                ctx.moveTo(0,180);
                ctx.lineTo(0,190);
                ctx.stroke();
                ctx.closePath();
                ctx.restore()
            }
        // 时针
        ctx.save();
        ctx.lineWidth=7;
        ctx.strokeStyle="#000";
        ctx.translate(250,250);
        ctx.rotate(270*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,110);
        ctx.lineTo(0,-10);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 分针
        ctx.save();
        ctx.lineWidth=5;
        ctx.strokeStyle="#000";
        ctx.translate(250,250);
        ctx.rotate(210*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,130);
        ctx.lineTo(0,-10);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 秒针
        ctx.save();
        ctx.lineWidth=3;
        ctx.strokeStyle="#000";
        ctx.translate(250,250);
        ctx.rotate(0*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,150);
        ctx.lineTo(0,-10);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 表盘中心
        ctx.lineWidth=2;
        ctx.storeStyle='red';
        ctx.beginPath();
        ctx.arc(250,250,3.5,0,360,false);
        ctx.stroke();
        ctx.fillStyle = ' White ' ; 
        ctx.fill (); 
        ctx.closePath (); 

        // set the hour hand, second hand in front of the small dots 
        ctx.translate ( 250 , 250 ); 
        ctx.beginPath (); 
        ctx.arc ( 0 , 140 , 2 , 0 , 360 , to false ); 
        ctx.stroke (); 
        ctx.fillStyle = " White " ; 
        ctx.fill (); 
        ctx.closePath ()

     </ Script> 

</ body> 
</ HTML>

Guess you like

Origin www.cnblogs.com/white55k/p/11846744.html