HTML canvas arcTo()Метод
Примеры
Создайте дугу между двумя касательными на canvas:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20); //Создать начальную точку
ctx.line(100,20); //Создать горизонтальную линию
ctx.arcTo(150,20,150,70,50); //Создать дугу
ctx.lineTo(150,120); //Создать вертикальную линию
ctx.stroke(); //Нарисуйте это
Попробуйте сами »
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая поддерживает метод.
| Метод | |||||
|---|---|---|---|---|---|
| arcTo() | Да | 9.0 | Да | Да | Нет |
Определение и использование
Метод arcTo() создает дугу/кривую между двумя касательными на canvas.
Совет:Пожалуйста, используйтеstroke()метод, чтобы нарисовать точную дугу на canvas.
| Синтаксис JavaScript: | context.arcTo(x1,y1,x2,y2,r); |
|---|
Значения параметров
| Параметр | Описание |
|---|---|
| x1 | Координата x точки пересечения двух касательных. |
| y1 | Координата y точки пересечения двух касательных. |
| x2 | Координата x точки на второй касательной. |
| y2 | Координата y точки на второй касательной. |
| r | Радиус дуги. |
Координаты x и y любой точки на первой линии — это положение последней точки; в этом примере они равны100,20. С помощью(x1,y1),(x2,y2),(100,20)Трёх точек можно определить положения двух линий, а затем радиус определяет положение дуги.
Справочник по HTML canvas Другие расширения