Get canvas object
var canvas = document.getElementById("mycanvas");
Copy the code
Canvas context
var ctx = canvas.getContext("2d");
Copy the code
Set properties
1. Width and height: 300, 150 by default
canvas.width
canvas.height
Copy the code
2, stroke
Ctx. strokeStyle color value, gradient value, pattern
3, empty
ctx.clearRect(x, y, w, h); Clear the rectangle ctx.clearRect(0, 0, canvas.width, canvas.height); Empty the entireCopy the code
Draw a straight line
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
Copy the code
Drawing graphics
1. Polygons
Determine the coordinates and repeat lineToCopy the code
2, rectangle
ctx.strokeRect(x, y, w, h); FillRect (x, y, w, h); Rect (x, y, w, h); Wireframe CTX. Stroke (); ctx.rect(x, y, w, h); Fill the CTX. The fill ();Copy the code
3. Regular polygon
4. Draw a curve
5. Draw arcs