Recently I am learning canvas element. The

tag is just a graphic container, and js must be used to draw the graph. In order to enhance the understanding of canvas element, I draw A Doraemon with Canvas

Renderings to be implemented

The online preview

To draw doraemon, one must first master the following functions:

  • arcTo()
  • Canvas draws circles or arcs
  • bezierCurveTo()
  • quadraticCurveTo()

Start painting!!

First we need to create a 400*600 canvas as follows:

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

Next, you define a div to display the coordinates

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

Then I wrote a function to display the coordinates, which can be used to see roughly what 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;
    }
Copy the code

The getContext() method then returns an environment to draw on the canvas.

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

Then start drawing the head:

cxt.beginPath(); // Start path cxt.lineWidth = 1; // Line width is 1 cxt.strokeStyle ='# 000'; Arc (200, 175, 175, 0.7 * math.pi, 0.3 * math.pi); // draw the arc, center point (200,175), radius 175 cxt.fillstyle ='#0bb0da'; // Set the fill color cxt.fill(); // Fill color cxt.stroke(); // Draw the pathCopy the code

The header is as follows:

Then draw the face:

        cxt.beginPath();
        cxt.fillStyle = '#fff'; cxt.moveTo(110, 110); // Move path to point (110,110) without creating line cxt.quadraticCurveTo(-10, 200, 120, 315); // create a quadratic Bessel curve, control point (-10,200), end point (120,315) cxt.lineTo(280, 315); // Add a new point and create a line cxt.quadraticCurveTo(410, 210, 290, 110) from (110,110) to (280,315) in the canvas; cxt.lineTo(110, 110); cxt.fill(); cxt.stroke();Copy the code

The face is as follows:

Then paint 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 (200,100), that is, draw cxt.bezierCurveTo(200, 175, 110, 175, 110, 100); // Draw the lower left semi-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();Copy the code

Then draw the left and right eyeballs:

/* right eye */ cxt.beginPath(); cxt.fillStyle ='# 000'; cxt.arc(230, 130, 12, 0, 2 * Math.PI); cxt.fill(); cxt.stroke(); /* left eye */ cxt.beginPath(); cxt.fillStyle ='# 000';
        cxt.arc(170, 130, 12, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
Copy the code

Left and right eyeballs:

Then draw the nose:

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

Nose:

Then draw the 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); // Cxt. moveTo(200, 195); cxt.lineTo(200, 290); // 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();Copy the code

Beard:

Then draw the mouth:

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

Mouth:

Next draw a scarf:

cxt.beginPath(); cxt.moveTo(96, 316); cxt.lineTo(305, 316); cxt.lineTo(320, 316); cxt.arcTo(330, 316, 330, 326, 10); LineTo (330, 336); // Create an arc on the canvas that is between two tangent lines, with the starting coordinates of (330,316), the ending coordinates of (330,326), and the 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();
Copy the code

Scarf:

Then draw the clothes:

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

Clothing:

/ / the left 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();
Copy the code

Hands:

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();Copy the code

Belly:

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();
Copy the code

The small pocket:

Finally draw two feet and the space between them:

*/ cxt.beginPath(); cxt.fillStyle ='#fff'; cxt.arc(200, 529, 20,Math.PI, 0); cxt.fill(); cxt.stroke(); BeginPath (); /* beginPath(); cxt.fillStyle='#fff'; CXT. MoveTo (180528); CXT. LineTo (72528); CXT. BezierCurveTo,52,558,72,558 (52528); CXT. LineTo (180558); CXT. MoveTo (180558); CXT. BezierCurveTo (200558200528180528); cxt.fill(); cxt.stroke(); / / right foot CXT. BeginPath (); cxt.fillStyle='#fff'; CXT. MoveTo (220528); CXT. LineTo (328528); CXT. BezierCurveTo (348528348558328558); CXT. LineTo (220558); CXT. MoveTo (220558); CXT. BezierCurveTo (200558200528220528); cxt.fill(); cxt.stroke();Copy the code

Get out of here

For the complete code, please click: Doraemon