Previously: Canvas Starter Guide

Final effect:

The tutorial

  1. Get the Canvas object
  2. Get the context object
  3. Add a little detail
  4. You’re done

If you look at the figure above, they’re basically circular arcs. Setting a few concentric circles and splicing a few arc can be the painting.

outline

  1. First set the fill color, by taking the color you know the fill color isrgb(241, 201, 96)
  2. Draw a complete circle
context.fillStyle = 'rgb(241, 201, 96)';
context.arc(100.100.50.0.2 * Math.PI, true);
context.fill();
Copy the code

The mouth

  1. Draw a semicircle, characterized by a concentric circle with the outline
context.lineWidth = 2;
context.arc(100.100.40.0.Math.PI, false);
context.stroke();
Copy the code

Eye contour

Eye contour can be troublesome, divided into left eye and right eye

Both eye themes are composed of two concentric circles

The left eye

/ / the left eye
context.beginPath();
context.arc(75.90.20.Math.PI * 1.1.Math.PI * 1.9.false);
context.stroke();

context.beginPath();
context.arc(75.90.10.Math.PI * 1.1.Math.PI * 1.9.false); 
context.stroke();

context.beginPath();
context.arc(60.85.5.Math.PI, Math.PI * 2.true); // Left eye junction
context.stroke();

context.beginPath();
context.arc(90.85.5.Math.PI, Math.PI * 2.true); // Left eye right junction
context.stroke();
Copy the code

In his right eye:

context.beginPath();
context.arc(125.90.20.Math.PI * 1.1.Math.PI * 1.9.false);
context.stroke();

context.beginPath();
context.arc(125.90.10.Math.PI * 1.1.Math.PI * 1.9.false);
context.stroke();

context.beginPath();
context.arc(110.85.5.Math.PI, Math.PI * 2.true); // Right eye left junction
context.stroke();

context.beginPath();
context.arc(140.85.5.Math.PI, Math.PI * 2.true); // Right eye right junction
context.stroke();
Copy the code

eye

The eyeball is the last step, just a filled circle

/ / in the right eye ball
context.fillStyle = 'black';
context.beginPath();
context.arc(115.80.5.0.Math.PI * 2.false);
context.fill();

/ / the left eye ball
context.fillStyle = 'black';
context.beginPath();
context.arc(65.80.5.0.Math.PI * 2.false);
context.fill();
Copy the code

summary

Overall, this one is ridiculously easy. There are also areas that can be optimized, such as using Path2D to save information for reuse.

PS: we read after feel helpful to their own can be three even messages, welcome to put forward valuable comments, also welcome you interested in the relevant technology developers (invited by the team developers wechat X118422) into the group, online answer and discuss data visualization, optimizing the performance of charts and other technical issues ~