Tutorial on drawing arcs using HTML5 Canvas API_html5 tutorial tips

Draw a standard arc

Before we start, let’s optimize our drawing environment. The inspiration comes from the texture of the previous class. If you don't like this background, I also provide other background images in the images directory for you to choose from. In addition, all style sheets are written under .

JavaScript CodeCopy content to clipboard

2. "zh">
4. "UTF-8">
9. "canvas-warp">
10. "canvas">
11. Your browser doesn’t support Canvas? ! Change it quickly! !

<script> </span></li> <li class="alt"> <span> window.onload = </span><span class="keyword">function</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"><span> canvas.width = 800; </span></li> <li><span> canvas.height = 600; </span></li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li> <span> context.fillStyle = </span><span class="string">"#FFF"</span><span>; </span> </li> <li class="alt"><span> context.fillRect(0,0,800,600); </span></li> <li><span> </span></li> <li class="alt"><span> } </span></li> <li><span></script>

Run result:

The reason why we need to draw a blank rectangle to fill the canvas is because as we said before, the canvas is transparent. If the background color is not set, it will be covered by the texture I set. I think To make it have a background color (white), there is only one way to draw a rectangle covering the canvas.

How about it? Isn’t it very cool?

Use arc() to draw an arc
The method of using arc() is as follows:

JavaScript CodeCopy content to clipboard

1. context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

The first three parameters are the circle center coordinates and circle radius. startAngle and endAngle use radian values, not angle values. The regulation of radians is absolute, as shown in the figure below.

anticlockwise indicates the drawing method, whether it is drawn clockwise or counterclockwise. It passes in a Boolean value, true means drawing counterclockwise, false means drawing clockwise, and the default value is false.

The regulation of radians is absolute. What does it mean? It means what kind of arc you want to draw. Just fill in the arc according to the standard above.

For example, if you draw an arc of 0.5pi ~ 1pi, if you draw it clockwise, it will be only the 1/4 arc in the lower left corner; if you draw it counterclockwise, it will be the complementary 3/4 arc in the upper right corner. Try it yourself here without giving examples.

Use tangent points to draw arcs

arcTo() introduction: The
arcTo() method receives 5 parameters, which are the coordinates of the two tangent points and the arc radius. This method draws an arc based on tangents, that is, an arc is determined by two tangents.
The details are as follows.

JavaScript CodeCopy content to clipboard

1. arcTo(x1,y1,x2,y2,radius)

This function draws an arc with a given radius. The starting point of the arc is tangent to the straight line from the current path position to point (x1, y1). The end point of the arc is tangent to the straight line from point (x1, y1) to point (x2). , y2) is tangent to the straight line. Therefore, it is usually used with moveTo() or lineTo(). Its ability can be replaced by the simpler arc(), which is complex because it uses pointcuts in the drawing method.

Use tangent points to draw arcs:
In the following case, I also drew the tangent lines to see it more clearly.

JavaScript CodeCopy content to clipboard

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<script>   </span></li> <li class="alt"> <span>    window.onload = </span><span class="keyword">function</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"><span>        canvas.width = 800;   </span></li> <li><span>        canvas.height = 600;   </span></li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"><span>        context.fillRect(0,0,800,600);   </span></li> <li><span>  </span></li> <li class="alt"><span>        drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);   </span></li> <li><span>    };   </span></li> <li class="alt"><span>  </span></li> <li> <span>    </span><span class="keyword">function</span><span> drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){   </span> </li> <li class="alt"><span>        cxt.beginPath();   </span></li> <li><span>        cxt.moveTo(x0, y0);   </span></li> <li class="alt"><span>        cxt.arcTo(x1, y1, x2, y2, r);   </span></li> <li><span>  </span></li> <li class="alt"><span>        cxt.lineWidth = 6;   </span></li> <li> <span>        cxt.strokeStyle = </span><span class="string">"red"</span><span>;   </span> </li> <li class="alt"><span>        cxt.stroke();   </span></li> <li><span>  </span></li> <li class="alt"><span>        cxt.beginPath();   </span></li> <li><span>        cxt.moveTo(x0, y0);   </span></li> <li class="alt"><span>        cxt.lineTo(x1, y1);   </span></li> <li><span>        cxt.lineTo(x2, y2);   </span></li> <li class="alt"><span>  </span></li> <li><span>        cxt.lineWidth = 1;   </span></li> <li class="alt"> <span>        cxt.strokeStyle = </span><span class="string">"#0088AA"</span><span>;   </span> </li> <li><span>        cxt.stroke();   </span></li> <li class="alt"><span>  </span></li> <li><span>    }   </span></li> <li class="alt"><span></script>