Home >Web Front-end >H5 Tutorial >html5 Canvas drawing tutorial (5)—arc method of drawing curves in canvas_html5 tutorial skills
In this article Drawing Lines on Canvas, I talked about how to draw straight lines. Logically, this article on drawing curves should have been published long ago, but since drawing curves on canvas is quite special, I haven’t figured it out yet, so Try it step by step.
One of the difficulties in drawing curves in canvas is that there are only 4 functions for curves! They are arc, arcTo, quadraticCurveTo, and bezierCurveTo. Let me start with the simplest arc method.
The function of arc is to draw a regular arc, which can be a complete circle or a certain arc of a circle. The syntax for arc is as follows: 🎜>
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
I will explain its parameters, that is,
arc(center of circle x, center of circle y, radius, starting angle, ending angle, counterclockwise or not)
ctx.arc(400,400,20,0 ,Math.PI*2/4);
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2 Math.PI*2/4); //The starting point is 90 degrees, the end point is 360 90 Degree