Suck the cat with code! This paper is participating in[Cat Essay Campaign].

Draw a cat dial on canvas 🐱⌚️

Today we will draw a cat dial on canvas

First define two canvases, one for drawing the dial, one for drawing the hour hand of the table, etc

For the cat painting, we draw relatively simple, mainly draw the cat’s eyes, nose and whiskers, after these elements are drawn, the whole cat dial out

<! DOCTYPEhtml>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Rolex Funny Cat watch</title>
    <style>
        #canvas.#canvasClock{
            border:1px solid #ccc;
            position:absolute;
            top:50%;
            left:50%;
            margin-top: -250px;
            margin-left: -300px;
        }
    </style>
</head>

<body>
<canvas id="canvas" width="600" height="500">

</canvas>
<! -- Used to draw the contents of the scale -->
<canvas id="canvasClock" width="600" height="500">

</canvas>

<script>
    var can=document.getElementById("canvas");
    var ctx=can.getContext("2d");
    var grd=ctx.createRadialGradient(200.200.80.200.200.200);
    ctx.beginPath();
    grd.addColorStop(0."# 972020");
    grd.addColorStop(1."#eb8d37");
    ctx.arc(200.200.200.0.2*Math.PI);
    ctx.lineWidth=2;
    ctx.strokeStyle="# 999";
    ctx.fillStyle=grd;
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(200.200.160.0.2*Math.PI);
    ctx.fillStyle="#f5d57d";
    ctx.closePath();
    ctx.stroke();
    ctx.fill();

    / / nose
    ctx.beginPath();
    ctx.arc(200.145.18.0.2*Math.PI);
    var grd2=ctx.createRadialGradient(208.140.2.200.148.18);
    grd2.addColorStop(1."#C93E00");
    ctx.fillStyle=grd2;
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    ctx.beginPath();
    ctx.closePath();
    ctx.stroke();

    / / eyes
    ctx.beginPath();
    ctx.arc(160.60.40.0.1*Math.PI,true);
    ctx.fillStyle="RGB (51,53,54)";
    ctx.lineWidth=2;
    ctx.stroke();
    ctx.fill();

    ctx.beginPath();
    ctx.arc(240.60.40.0.1*Math.PI,true);
    ctx.stroke();
    ctx.fill();

    ctx.beginPath();
    ctx.arc(160.100.40.0.1*Math.PI,false);
    ctx.stroke();
    ctx.fill();

    ctx.beginPath();
    ctx.arc(240.100.40.0.1*Math.PI,false);
    ctx.stroke();
    ctx.fill();

    ctx.beginPath();
    ctx.rect(120.60.160.40);
    ctx.fill();

    ctx.beginPath();
    ctx.lineWidth=1;
    ctx.moveTo(119.60);
    ctx.lineTo(119.100);
    ctx.closePath();

    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(200.60);
    ctx.lineTo(200.100);
    ctx.closePath();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(281.60);
    ctx.lineTo(281.100);
    ctx.closePath();
    ctx.stroke();

    / / eyes
    ctx.beginPath();
    ctx.arc(175.110.12.0.2*Math.PI,true);
    ctx.fillStyle="# 000";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(265.110.12.0.2*Math.PI,true);
    ctx.fillStyle="# 000";
    ctx.fill();
    / / mouth
    ctx.beginPath();
    ctx.arc(200.145.163.0.22*Math.PI,0.78*Math.PI);
    ctx.fillStyle="#fff";
    ctx.stroke();
    / / the beard
    ctx.moveTo(75.145);
    ctx.lineTo(165.170);
    ctx.moveTo(65.190);
    ctx.lineTo(165.190);
    ctx.moveTo(65.230);
    ctx.lineTo(165.210);
    ctx.moveTo(325.145);
    ctx.lineTo(235.170);
    ctx.moveTo(335.190);
    ctx.lineTo(235.190);
    ctx.moveTo(335.230);
    ctx.lineTo(235.210);
    ctx.stroke();

    / / write
    ctx.font="bold 30px 宋体";
    ctx.fillStyle="#ea8f07";
    //ctx.
    ctx.fillText("RELAX".150.260);


    / / draw the clock
    var can=document.getElementById("canvasClock");
    var ctx=can.getContext("2d");
    var r=200;// Radius is 150
    var age1=6*Math.PI/180;// The number of degrees of rotation per minute
    var age2=30*Math.PI/180;// The number of degrees of rotation per hour
    var color="# 333";
    var color2="#f6d579"
    var color3="#f6d579"
    ctx.translate(200.200);
    // Time scale
    function hour(){
        ctx.beginPath();
        ctx.strokeStyle=color2;
        ctx.lineWidth=2;
        ctx.moveTo(0,-(r-5));
        ctx.lineTo(0,-(r-20));
        ctx.rotate(age2);
        ctx.closePath();
        ctx.stroke();
    }
    // The minute scale
    function minute(){
        ctx.beginPath();
        ctx.lineWidth=1;
        ctx.strokeStyle=color2;
        ctx.moveTo(0,-(r-5));
        ctx.lineTo(0,-(r-15));
        ctx.rotate(age1);
        ctx.closePath();
        ctx.stroke();
    }
    // Clock scale value
    function timeText(){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle=color3;
        ctx.font="20 px blackbody";
        ctx.textAlign="center";
        ctx.textBaseline="middle";
        for(var i=1; i<=12; i++){// math.sin (x) x is in radians
            var xPos=(r-30) *Math.sin(30*Math.PI/180*i);
            var yPos=-(r-30) *Math.cos(30*Math.PI/180*i);
            ctx.fillText(i,xPos,yPos);
        }
        ctx.closePath();
        ctx.restore();
    }
    / / pointer
    function drawLine(w,x1,y1,x2,y2,t){
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle=color;
        ctx.lineWidth=w;
        ctx.rotate(age1*t);
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }
    function drawTime(){
        var day=new Date(a);var h=day.getHours();
        var m=day.getMinutes();
        var s=day.getSeconds();
        m+=s/60;
        h+=h/60;
        var num=r+5;
        ctx.clearRect(-num,-num,2*num,2*num);
        for(var i=0; i<12; i++){ hour(); }for(var i=0; i<60; i++){ minute(); } timeText();/ / the clock 70
        drawLine(5.0.10.0,-(r-90),h*5);
        90 / / minute
        drawLine(3.0.10.0,-(r-70),m);
        110 / / second
        drawLine(1.0.10.0,-(r-50),s);
    }
    drawTime();
    setInterval(function(){
        drawTime();
    },1000)
</script>
</body>
</html>
Copy the code

Take a look at the effect:

The beginPath() method is used to start a path or reset the current path.

The stroke() method actually draws the path defined by the moveTo() and lineTo() methods, which acts like a brush to draw the defined graph

The time scale is the function of the timing execution method, the logic is very simple.