1. Draw a rectangle:
1.context.rect(x,y,width,height);
2.context.fillRect(x,y,width,height);
3.context.strokeRect(x,y,width,height);
4.context.clearRect(x,y,width,height);
| parameter | describe |
|---|---|
| x | the x coordinate of the upper left corner of the rectangle |
| and | The y coordinate of the upper left corner of the rectangle |
| width | the width of the rectangle, in pixels |
| height | the height of the rectangle, in pixels |
Second, draw the path:
1.context.fill();// If the path is not closed, the fill() method will add a line from the end point to the start point of the path to close the path, and then fill the path.
2.context.stroke();// Actually draw the path defined by the moveTo() and lineTo() methods. The default color is black.
3.contet.beginPath();// beginPath() method starts a path, or resets the current path. Use these methods to create paths: moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc(). Use the stroke() method to draw the exact path on the canvas.
4.moveTo(x,y)
5 To(x,y)
6.closePath();// Create a path from the current point to the starting point.
7.context.clip();//clip() The method cuts any shape and size from the original canvas.
8.context.quadraticCurveTo(cpx,cpy,x,y);//Create a quadratic Bezier curve
9.context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);//Create a cubic Bezier curve
10.context.arc(x,y,r,sAngle,eAngle,counterclockwise);//arc() method creates arc/curve (used to create circle or partial circle). counterclockwise:False = clockwise, true = counterclockwise. Clockwise by default.
- center: arc( 100 , 75 ,50,0*Math.PI,1.5*Math.PI)
- Start angle: arc(100,75,50, 0 ,1.5*Math.PI)
- End angle: arc(100,75,50,0*Math.PI, 1.5*Math.PI )
11.context.arcTo(x1,y1,x2,y2,r);//arcTo() method creates an arc/curve between two tangents on the canvas. (w3c is wrong, x1, y1 should be the control point coordinates)
12.context.isPointInPath(x,y);// The method returns true if the specified point is in the current path; otherwise, it returns false. .line