Recently I am learning canvas element. The
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