Home >Web Front-end >H5 Tutorial >Tutorial on drawing arcs using HTML5 Canvas API_html5 tutorial tips

Tutorial on drawing arcs using HTML5 Canvas API_html5 tutorial tips

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 15:45:281944browse

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

"zh">
"UTF-8">
New canvas
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
"canvas-warp">
Your browser doesn’t support Canvas? ! Change it quickly! !

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

}

Run result:
2016322110254564.jpg (850×500)

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

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.
2016322110350997.jpg (600×425)

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

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

nbsp;html>
"zh">
"UTF-8">
绘制弧线
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);

};

function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){

cxt.beginPath();

cxt.moveTo(x0, y0);

cxt.arcTo(x1, y1, x2, y2, r);

cxt.lineWidth = 6;

cxt.strokeStyle = "red";

cxt.stroke();

cxt.beginPath();

cxt.moveTo(x0, y0);

cxt.lineTo(x1, y1);

cxt.lineTo(x2, y2);

cxt.lineWidth = 1;

cxt.strokeStyle = "#0088AA";

cxt.stroke();

}

Run result:
2016322110438098.jpg (850×500)

This case also illustrates the role of various key points of arcTo(). For a clearer explanation, I will mark another analysis diagram.
2016322110502905.jpg (600×425)

Please note here that the starting point of arcTo() drawing is (x0, y0), but (x0, y0) is not necessarily the tangent point of the arc. The real arcTo() function only passes in (x1, y1) and (x2, y2). Among them (x1, y1) is called the control point, (x2, y2) is the tangent point of the arc end point, which is not necessarily on the arc. But (x0, y0) must be on the arc.
It’s a little convoluted. Let’s try it out by changing the parameters of the drawArcTo() function.
(x2, y2) is not necessarily on the arc:

JavaScript CodeCopy content to clipboard

drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);

2016322110549543.jpg (600×425)

(x0, y0) must be on the arc:

JavaScript CodeCopy content to clipboard

drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);

2016322110625028.jpg (600×425)

It’s quite interesting. It directly connects the tangent point and (x0, y0) to form a line segment in order to pass through (x0, y0). What a persistent arc...

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Tutorial on drawing arcs using HTML5 Canvas API_html5 tutorial tips

Related articles