HTML canvas arcTo() methode

HTML5 Canvas reference manual

Definitie en gebruik

arcTo() De methode maakt een boog/curiaat op het canvas tussen twee tanglijnen.

Tip:Gebruik stroke() De methode tekent een exacte boog op het canvas.

Voorbeeld

Maak een boog tussen twee tanglijnen op het canvas:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);           // Maakt het startpunt
ctx.lineTo(100,20);          // Maakt een horizontale lijn
ctx.arcTo(150,20,150,70,50); // Create an arc
ctx.lineTo(150,120);         // Create a vertical line
ctx.stroke();                // Draw

Try it yourself

Syntax

context.fillRect(x1,y1,x2,y2,r);

Parameter value

Parameter Description
x1 The x-coordinate of the start point of the arc.
y1 The y-coordinate of the start point of the arc.
x2 The x-coordinate of the end point of the arc.
y2 The y-coordinate of the end point of the arc.
r The radius of the arc.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

HTML5 Canvas reference manual