Front end small project: painting Doraemon with canvas

Time:2021-4-8

Recently, when learning canvas elements, < canvas > tags are just graphic containers, and you must use js to draw graphics. In order to enhance the understanding of canvas elements, we draw a Doraemon with canvas

Rendering to be realized

Front end small project: painting Doraemon with canvas

Online preview

In order to draw this Doraemon, we must first master the following functions:

Start painting!!

First, we need to create a 400 * 600 canvas. The code is as follows:

 <canvas id="doraemon" width="400" height="600"></canvas>

Then define a div to display the coordinates

<div id="put" style="width: 50px" height="20px"></div>

Then I wrote a function to display coordinates, which can be used to see which point to draw

function zuobiao(event) {
        var x = event.clientX;
        var y = event.clientY;
        var out = document.getElementById("put");
        out.innerHTML = "x:" + x + " y:" + y;
    }

The getcontext () method then returns an environment for drawing on the canvas.

var cxt = document.getElementById('doraemon').getContext('2d');

Then start drawing the head:

cxt.beginPath (); // starting path
        cxt.lineWidth  =1; // the linewidth is 1
        cxt.strokeStyle  ='# 000'; // color of strokes
        cxt.arc (200, 175, 175, 0.7 *  Math.PI , 0.3 *  Math.PI ); // draw arc, center point (200175), radius 175
        cxt.fillStyle  ='# 0bb0da'; // set the color when filling
        cxt.fill (); // fill color
        cxt.stroke (); // draw path

The head is as follows:

Front end small project: painting Doraemon with canvas

Then draw the face:

cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.moveTo (110, 110); // move the path to the point (110110) without creating a line
        cxt.quadraticCurveTo (- 10, 200, 120, 315); // create quadratic Bezier curve, control point (- 10200), end point (120315)
        cxt.lineTo (280, 315); // add a new point, and then create lines from (110110) to (280315) in the canvas
        cxt.quadraticCurveTo(410, 210, 290, 110);
        cxt.lineTo(110, 110);
        cxt.fill();
        cxt.stroke();

The face is as follows:
Front end small project: painting Doraemon with canvas

Then draw the eyes:

cxt.beginPath();
        cxt.lineWidth = 1;
        cxt.fillStyle = '#fff';
        cxt.moveTo(110, 110);
        cxt.bezierCurveTo (110, 25, 200, 25, 200, 100); // create a cubic Bezier curve, control point 1 (110, 25), control point 2 (200, 25), end point (200100), that is, draw the upper left half ellipse
        cxt.bezierCurveTo (200, 175, 110, 175, 110, 100); // draw the lower left half ellipse
        cxt.moveTo(200, 100);
        cxt.bezierCurveTo(200, 25, 290, 25, 290, 100);
        cxt.bezierCurveTo(290, 175, 200, 175, 200, 100);
        cxt.fill();
        cxt.stroke();

Front end small project: painting Doraemon with canvas

Then draw the left and right eyeballs:

/*Right eyeball*/
        cxt.beginPath();
        cxt.fillStyle = '#000';
        cxt.arc(230, 130, 12, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
        /*Left eyeball*/
        cxt.beginPath();
        cxt.fillStyle = '#000';
        cxt.arc(170, 130, 12, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();

Left and right eyeballs:

Front end small project: painting Doraemon with canvas

Then draw the nose:

        cxt.beginPath();
        cxt.arc(200, 165, 25, 0, 2 * Math.PI);
        cxt.fillStyle = '#d05823';
        cxt.fill();
        cxt.stroke();

Nose:

Front end small project: painting Doraemon with canvas

Then draw the beard:

//Left beard
        cxt.beginPath();
        cxt.moveTo(80, 175);
        cxt.lineTo(150, 195);
        cxt.moveTo(80, 200);
        cxt.lineTo(150, 205);
        cxt.moveTo(80, 225);
        cxt.lineTo(150, 215);
        //Middle beard
        cxt.moveTo(200, 195);
        cxt.lineTo(200, 290);
        //Right beard
        cxt.moveTo(250, 195);
        cxt.lineTo(320, 175);
        cxt.moveTo(250, 205);
        cxt.lineTo(320, 200);
        cxt.moveTo(250, 215);
        cxt.lineTo(320, 225);
        cxt.stroke();

Beard:

Front end small project: painting Doraemon with canvas

Then draw the mouth:

        cxt.moveTo(80, 240);
        cxt.quadraticCurveTo(200, 350, 320, 240);
        cxt.stroke();

Mouth:
Front end small project: painting Doraemon with canvas

Next, draw the scarf:

cxt.beginPath();
        cxt.moveTo(96, 316);
        cxt.lineTo(305, 316);
        cxt.lineTo(320, 316);
        cxt.arcTo (330, 316, 330, 326, 10); // create an arc between two tangent lines on the canvas, with the start coordinate of (330316), end coordinate of (330326), and radius of 10
        cxt.lineTo(330, 336);
        cxt.arcTo(330, 346, 305, 346, 10);
        cxt.lineTo(81, 346);
        cxt.arcTo(71, 346, 71, 336, 10);
        cxt.lineTo(71, 326);
        cxt.arcTo(71, 316, 81, 316, 10);
        cxt.lineTo(96, 316);
        cxt.fillStyle = '#b13209';
        cxt.fill();
        cxt.stroke();

Scarf:

Front end small project: painting Doraemon with canvas

Then draw the clothes:

cxt.beginPath();
        cxt.fillStyle = '#0bb0da';
        cxt.moveTo(80, 346);
        //Left dress
        cxt.lineTo(26, 406);
        cxt.lineTo(65, 440);
        cxt.lineTo(85, 418);
        cxt.lineTo(85, 528);
        cxt.lineTo(185, 528);
        //Right dress
        cxt.lineTo(315, 528);
        cxt.lineTo(315, 418);
        cxt.lineTo(337, 440);
        cxt.lineTo(374, 406);
        cxt.lineTo(320, 346);
        cxt.fill();
        cxt.stroke();

Clothes:
Front end small project: painting Doraemon with canvas
Then draw the hand:

//Left hand
        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(37, 433, 30, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
        //Right hand
        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(363, 433, 30, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();

Hand:
Front end small project: painting Doraemon with canvas

Then draw the belly:

        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI);
        cxt.fill();
        cxt.stroke();

Stomach:
Front end small project: painting Doraemon with canvas

Then draw the pocket

        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.moveTo(130, 394);
        cxt.lineTo(270, 394);
        cxt.moveTo(130, 394);
        cxt.bezierCurveTo(130, 490, 270, 490, 270, 394);
        cxt.fill();
        cxt.stroke();

Small pocket:

Front end small project: painting Doraemon with canvas

Finally, draw two feet and the gap between them

/*The gap between two feet*/
        cxt.beginPath();
        cxt.fillStyle = '#fff';
        cxt.arc(200, 529, 20,Math.PI, 0);
        cxt.fill();
        cxt.stroke();
        /*Feet*/
        //Left foot
        cxt.beginPath();
        cxt.fillStyle='#fff';
        cxt.moveTo(180,528);
        cxt.lineTo(72,528);
        cxt.bezierCurveTo(52,528,52,558,72,558);
        cxt.lineTo(180,558);
        cxt.moveTo(180,558);
        cxt.bezierCurveTo(200,558,200,528,180,528);
        cxt.fill();
        cxt.stroke();
        //Right foot
        cxt.beginPath();
        cxt.fillStyle='#fff';
        cxt.moveTo(220,528);
        cxt.lineTo(328,528);
        cxt.bezierCurveTo(348,528,348,558,328,558);
        cxt.lineTo(220,558);
        cxt.moveTo(220,558);
        cxt.bezierCurveTo(200,558,200,528,220,528);
        cxt.fill();
        cxt.stroke();

Completed ^ ( ̄)  ̄ ^
Front end small project: painting Doraemon with canvas

For complete code, please click:Doraemon

Recommended Today

Deeply analyze the principle and practice of RSA key

1、 Preface After experiencing many dark moments in life, when you read this article, you will regret and even be angry: why didn’t you write this article earlier?! Your darkest moments include: 1. Your project needs to be connected with the bank, and the other party needs you to provide an encryption certificate. You have […]