canvas

The default size is 300×150, and the width and height can be set directly on the label

<canvas id="myCanvas" height=500 width=500></canvas>Copy the code

Js gets canvas canvas

var canvas = document.getElementById("myCanvas");Copy the code

Define brush

var ctx = canvas.getContext("2d"); // Draw 3d upload webGLCopy the code

CPU acceleration is usually enabled for 3D animations, so 2d images can also be set to translateZ or rotate to trick the browser into getting CPU acceleration

moveTo

ctx.moveTo(100, 100);Copy the code

Position the initial position of the brush

lineTo 

ctx.lineTo(200, 200);Copy the code

A straight line

A simple triangle, closePath() is recommended as the final step

ctx.moveTo(100, 100); ctx.lineTo(200, 200); ctx.lineTo(100, 300); ctx.lineWidth = 10; // The middle of the line is the baseline line ctx.strokeStyle ="red";        
ctx.closePath();
Copy the code

ctx.stroke(); / / strokeCopy the code

ctx.fill(); // Fill, end point connect, fill insideCopy the code

The brush method is the same as the composition method, these two methods are the ones that display the composition on the canvas, and all the fill and stroke methods are applied to all the subpaths, that is, if you do not open a new beginPath, the same method will be overwritten

ctx.beginPath()

Start a new path, preferably before each canvas

ctx.clearRect(0, 0, w, h);

Clear canvas, rectangle form

ctx.beginPath(); ctx.rect(100, 100, 200, 100); // rectangle, top left corner (100, 100), left 200, top 100, strokeRect() and fillRect(), // and these two methods have beginPath ctx.stroke(); Var h = canvas.height, w = canvas.width; ctx.clearRect(0, 0, w, h); //ctx.clearRect(100, 100, 80, 80);Copy the code

A demo of a block falling

functionanimate(y) { ctx.beginPath(); Ctx. rect(50, y, 50, 50); ctx.fill(); // ctx.fillRect(50, y, 50, 50); } var timer =setInterval(function () {            
    ctx.clearRect(0, 0, w, h);            
    animate(y);            
    y += 10            
    if(y >= 460) { animate(450) clearInterval(timer); }}, 100).Copy the code

Notice if you use rect, be careful if you don’t have beginPath, you’re going to get a bar rectangle, and that’s because clearRect only clears stroke/fill images that are drawn on the canvas, and your brush traces are not cleared, so every timer is going to stroke, What you end up with is a big rectangle. Also, notice that the next time the cube moves out of the canvas, I’m positioning it directly to the bottom of the canvas.

Ctx. arc(Center x, center y, r, starting radian, end radian, clockwise)

ctx.arc(50, 50, 40, Math.PI/180*0, Math.PI/180*270, 0); // Center, radius, radian, 0 cis 1 inverse ctx.stroke(); // This is a fan ctx.moveto (100, 200); ctx.lineTo(200, 200); ctx.arc(100, 200, 100, Math.PI/180 * 0, Math.PI/180 * 300, 1); ctx.lineTo(100, 200); ctx.stroke() ctx.moveTo(100, 240) ctx.arcTo(350, 240, 350, 400, 50); ctx.stroke();Copy the code

0 degrees On the positive half axis of the mathematical Cartesian coordinate system X, the magnitude of the Angle is 0~360 clockwise around the x axis in radians, so math.pi /180* x writes the desired magnitude

Bessel curve

ctx.moveTo(200, 200); ctx.quadraticCurveTo(300, 100, 500, 500); // CTX. BezierCurveTo (300, 100,400, 400, 500, 500); // Triple Bezier curve ctx.stroke();Copy the code

Changes to the coordinate system inside the canvas

The default is a point (0,0) in the upper left corner, but we can also change it, for example:

ctx.translate(200, 200); Rotate (math.pi /180 * 30); rotate(math.pi /180 * 30); rotate(math.pi /180 * 30); rotate(math.pi /180 * 30); // rotate the entire canvas so that (0,0) is the center of the circle, positive is clockwise, negative is counterclockwiseCopy the code

The save method can save the coordinate system, and the restore method can return to the coordinate system saved by Save (but only one coordinate system can be saved at the same time, so we usually save the original coordinate system for easy switching), such as the following example:

ctx.save(); Rotate (math.pi /180 * 30); rotate(math.pi /180 * 30); // Rotate the entire canvas, 30rad ctx.rect(100, 100, 50, 50); ctx.restore(); Ctx. rect(400, 400, 50, 50); ctx.fill();Copy the code