First of all, I will have a certain understanding and learning of canvas basic grammar. If there are not many sentences, I can read the usage soon. Then I will draw robot and Hello Kitty in real practice. (Attached source code)

Canvas based

The preparatory work

Add the

tag to the body tag. The default width and height of canvas: Var canvas = document.getelementById (‘myCanvas’); var canvas = document.getelementById (‘myCanvas’); Var CTX = Canvas. GetContext (‘2d’); Canvas length and width (size) can only be set using inline styles or JS. Set width to 800 and height to 800: canvas.width=800; canvas.height=800;

Based on drawing

Painting line
ctx.moveTo(0, 0); // Draw the origin (starting point).veto () ctx.lineto (100, 100); LineTo () ctx.lineto () ctx.lineto (100, 200); ctx.strokeStyle ='#F00'; // Set the line segment style/color ctx.stroke(); // Draw path.stroke ()Copy the code

If you connect two linetos, you are drawing from the original base. If you exceed the size of the canvas, you cannot display it.

Draw a triangle

A triangle formed by three lines of different colors

CTX. MoveTo (300100); CTX. LineTo (500400); ctx.strokeStyle ="#00F"; ctx.stroke(); ctx.beginPath(); //.beginpath () clears the drawn path and starts the new path ctx.moveto (500,400); CTX. LineTo (100400); ctx.strokeStyle ="#0F0"; ctx.stroke(); ctx.beginPath(); CTX. MoveTo (100400); CTX. LineTo (300100); ctx.strokeStyle ="#F00";
ctx.stroke();
Copy the code
A circle
CTX. Arc (300300,50,0,2 * math.h PI,true); // parameters: 300-- center x, 300-- center y, 50-- radius, 0,2* math. P-- radian range,true-- Counterclockwise /falseClockwise. ctx.strokeStyle ='# 000';
ctx.stroke();
Copy the code
rectangular
Ctx. strokeRect(300,100,200,100); // No need to use ctx.stroke (), it is already wrapped; // parameters: 300,100 -- top left coordinates, 200-- width, 100-- heightCopy the code
fill
CTX. MoveTo (0, 0); CTX. LineTo (100100); CTX. LineTo (100200); ctx.closePath(); // Close path, here is a triangle ctx.lineWidth = 10; //lineWidth sets the lineWidth of the stroke ctx.strokeStyle ="#F00"; //strokeStyle sets the stroke style ctx.stroke(); ctx.fillStyle ="rgba(0,255,0,0.5)"; //fillStyle sets the fill style ctx.fill(); // fill, equivalent to drawing stroke() ctx.strokerect (100,200,100,100) in the path; // draw a rectangle path ctx.fillrect (100,200,100,100); // Fill a rectangle ctx.beginPath(); CTX. Arc (300100,50,0,2 * math.h PI,true);
ctx.fillStyle = "Rgba (0,0,255,0.5)"; ctx.fill(); // Fill a circleCopy the code

Quadratic spline and Bezier curve

// Draw a quad-spline curve ctx.moveto (100,355); //moveTo() is the first point at both ends of the curve; CTX. QuadraticCurveTo (265145380349); //265,145 is the middle point, 380,349 is the end point ctx.stroke(); // Draw the Bessel curve ctx.beginPath(); CTX. MoveTo (175375); //moveTo() is the first point at both ends of the curve; CTX. BezierCurveTo (297182468252517380); Ctx.stroke (); // ctx.stroke();Copy the code

Basic use of the foundation is so much, as well as translation, conversion, shadow, pictures, cutting, off screen and so on is not talked about in this chapter, interested in baidu search to understand learning.

Small case 1: robot

(The original picture of the case is taken from mooC, if there is any infringement, please contact the author to delete, the source code is compiled by the author.)

Making the address

Case 2: Hello Kitty

(The original picture of the case is taken from moOCs. If there is any infringement, please contact the author to delete it. The source code is compiled by the author.)

Making the address

Thank you for watching, if there is a mistake, hope to contact or comment pointed out, thank you!