Разное

Canvas круг: Как нарисовать круг в HTML5 (Canvas)

22.07.2023

Содержание

Модуль canvas

canvas.circle(x, y, radius)¶

Рисует круг в точке x, y с радиусом radius;

canvas.clear()¶

Очищает холст целиком;

canvas.clear_rect(x, y, width, height)¶

Очищает прямоугольную область с левым верхним углом в точке x, y, шириной width и высотой height;

canvas.draw()¶

Функция перерисовки холста. Важно: вызывается только после того, как вызваны все нужные функции рисования;

canvas.fill_circle(x, y, radius)¶

Рисует закрашенный круг в точке x, y с радиусом radius;

canvas.fill_rect(x, y, width, height)¶

Рисует закрашенный прямоугольник с левым верхним углом в точке x, y, шириной width и высотой height;

canvas.fill_style(‘color’)¶

Функция для изменения цвета закраски. color — устанавливаемый цвет. Цвета можно выбрать из списка на этой странице Википедии;

canvas.fill_text(text, x, y, font=’Monospace’, size=24, align=’left’)¶

Рисует закрашенный текст text в точке x, y шрифтом font (Monospace по умолчнию), размером size (по умолчанию 24) пикселей и выравниванием align (по умолчанию — «left»). Возможные варианты выравнивания — «left», «right» и «center»

canvas.line_to(x, y)¶

Рисует линию из точки, в которой находится указатель в точку, с координатами x, y;

canvas.line_width(width)¶

Устанавливает ширину линии width в пикселях;

canvas.listen()¶

Запускает цикл ожидания событий от холста. Если такого ожидания не будет, обработчики событий не сработают.

canvas.move_to(x, y)¶

Устанавливает указатель в точку, с координатами x, y;

canvas.radius_line(x, y, angle, length)¶

Рисует радиальную линию из точки x, y под углом angle (в градусах) и длиной length.

canvas.reset()¶

Очищает холст целиком, сбрасывает цвет на черный и устанавливает ширину линий в 1;

canvas.set_color(‘color’)¶

Функция для изменения цвета кисти. color — устанавливаемый цвет. Цвета можно выбрать из списка на этой странице Википедии;

canvas.set_onclick(callback)¶

Устанавливает обработчик клика мышкой по холсту. Функция-обработчик callback должна принимать два параметра — x и y. Например

import canvas
def my_click(x, y):
print("Только что был клик!", x, y)
canvas.set_onclick(my_click)
canvas.listen()

canvas.stroke_rect(x, y, width, height)¶

Рисует прямоугольник с левым верхним углом в точке x, y, шириной width и высотой height;

canvas.stroke_style(‘color’)¶

Делает то же, что и canvas.set_color

canvas.stroke_text(text, x, y, font=’Monospace’, size=24, align=’left’)¶

Рисует контур текста text в точке x, y шрифтом font (Monospace по умолчнию), размером size (по умолчанию 24) пикселей и выравниванием align (по умолчанию — «left»). Возможные варианты выравнивания — «left», «right» и «center»

canvas.onclick(callback)¶

Тоже самое, что canvas.set_onclick.

canvas.onkey(callback, key_code)¶

Устанавливает обработчик нажатия клавиши на клавиатуре. Если параметр key_code не передан, функция-обработчик должна принимать один аргумент. В него будет передан код нажатой клавиши.

Если параметр key_code передан, то функция обработчик не должна принимать ни одного аргумента.

import canvas
# Функция-обработчик без аргумента. Будет вызвана
# при нажатии клавиши "стрелка влево"
def left():
print('ArrowLeft (left)')
canvas.onkey(left, 'ArrowLeft')
# Функция-обработчик с одним аргументом. Будет вызвана
# при нажатии любой клавиши на клавиатуре
# в key_code будет записан код нажатой клавиши
def keydown(key_code):
print(key_code)
canvas.onkey(keydown)
canvas.listen()

canvas.onkeyup(callback, key_code)¶

Устанавливает обработчик отпускания клавиши на клавиатуре. Если параметр key_code не передан, функция-обработчик должна принимать один аргумент. В него будет передан код отпушенной клавиши.

Если параметр key_code передан, то функция обработчик не должна принимать ни одного аргумента.

import canvas
# Функция-обработчик без аргумента.  Будет вызвана
# при отпускании клавиши "стрелка влево"
def left():
print('ArrowLeft (left)')
canvas.onkeyup(left, 'ArrowLeft')
# Функция-обработчик с одним аргументом. Будет вызвана
# при отпускании любой клавиши на клавиатуре
# в key_code будет записан код отпущенной клавиши
def keydown(key_code):
print(key_code)
canvas.onkeyup(keydown)
canvas.listen()

Коды клавиш такие же, как и в canvas.onkey

canvas.onrightclick(callback)¶

То же самое, что canvas.set_onclick, но для правой кнопки мыши

Коды клавиш¶

Код клавиши — это строка, чувствительная к регистру.

КодКлавиша
SpaceПробел
ArrowUp↑
ArrowDown↓
ArrowLeft←
ArrowRight→

Рисуем круг, овал, прямоугольник, дугу и многугольник в Tkinter

В этой части изучения Tkinter мы немного порисуем. Рисование в Tkinter реализовано при помощи виджета Canvas. Это функционал высокого уровня, который позволяет создавать графику в Tkinter. Рисование можно использовать для создания графиков статистики, самодельных пользовательских виджетов и даже небольших игр.

Содержание курса

  1. Создание окна по центру и кнопка выхода в Tkinter
  2. Разметка виджетов в Tkinter — pack, grid и place
  3. Виджеты Checkbutton, Label, Scale и Listbox в Tkinter
  4. Меню, подменю и панель инструментов в Tkinter
  5. Диалоговые окна в Tkinter — Выбор цвета — Выбор файла
  6. Рисуем линии, прямоугольники, круг и текст в Tkinter
  7. Пишем игру змейка на Tkinter

Содержание статьи

  • Рисуем линии в Tkinter — create_line()
  • Создаем цветные прямоугольники в Tkinter
  • Рисуем различные формы в Tkinter
  • Вставляем изображение в Canvas
  • Меняем шрифт и рисуем текст в Tkinter

Рисуем линии в Tkinter — create_line()

Линия – это примитивный геометрический элемент. На виджете Canvas создать линию можно при помощи метода create_line().

lines.py

Python

from tkinter import Tk, Canvas, Frame, BOTH class Example(Frame): def __init__(self): super().__init__() self.initUI() def initUI(self): self.master.title(«Рисуем линии») self.pack(fill=BOTH, expand=1) canvas = Canvas(self) canvas.create_line(15, 25, 200, 25) canvas.create_line(300, 35, 300, 200, dash=(4, 2)) canvas.create_line(55, 85, 155, 85, 105, 180, 55, 85) canvas.pack(fill=BOTH, expand=1) def main(): root = Tk() ex = Example() root.geometry(«400×250+300+300») root.mainloop() if __name__ == ‘__main__’: main()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

from tkinter import Tk, Canvas, Frame, BOTH

 

 

class Example(Frame):

 

    def __init__(self):

        super().

__init__()

        self.initUI()

 

    def initUI(self):

        self.master.title(«Рисуем линии»)

        self.pack(fill=BOTH, expand=1)

 

        canvas = Canvas(self)

        canvas.create_line(15, 25, 200, 25)

        canvas.create_line(300, 35, 300, 200, dash=(4, 2))

        canvas.create_line(55, 85, 155, 85, 105, 180, 55, 85)

 

        canvas.pack(fill=BOTH, expand=1)

 

 

def main():

    root = Tk()

    ex = Example()

    root.geometry(«400×250+300+300»)

    root.mainloop()

 

 

if __name__ == ‘__main__’:

    main()

В примере нашего кода, мы рисуем простые линии в Tkinter.

Python

canvas.create_line(15, 25, 200, 25)

canvas.create_line(15, 25, 200, 25)

Параметрами метода create_line() являются координаты x и y, которые обозначают стартовые и конечные точки линии.

Python

canvas.create_line(300, 35, 300, 200, dash=(4, 2))

canvas.create_line(300, 35, 300, 200, dash=(4, 2))

Мы нарисовали вертикальную линию. Опция dash позволяет создать пунктированную линию. Множества (4, 3) означает:

  • 4 — длинна тире или точки в пикселях;
  • 2 — пустой промежуток между тире либо точками.

Если указать dash=(1, 1) то у нас будет линия из точек.


Python

canvas.create_line(55, 85, 155, 85, 105, 180, 55, 85)

canvas.create_line(55, 85, 155, 85, 105, 180, 55, 85)

Метод create_line() может содержать несколько конечных точек, которые будут пресекаться линией. Согласно этому коду мы нарисовали треугольник имея три координата разных точек.

Создаем цветные прямоугольники в Tkinter

Цвет является объектом, который отображает комбинацию Красного, Зеленого и Синего цветов (RGB).

colours.py

Python

from tkinter import Tk, Canvas, Frame, BOTH class Example(Frame): def __init__(self): super().__init__() self.initUI() def initUI(self): self.master.title(«Цвета») self.pack(fill=BOTH, expand=1) canvas = Canvas(self) canvas.create_rectangle( 30, 10, 120, 80, outline=»#fb0″, fill=»#fb0″ ) canvas.create_rectangle( 150, 10, 240, 80, outline=»#f50″, fill=»#f50″ ) canvas.create_rectangle( 270, 10, 370, 80, outline=»#05f», fill=»#05f» ) canvas.

pack(fill=BOTH, expand=1) def main(): root = Tk() ex = Example() root.geometry(«400×100+300+300») root.mainloop() if __name__ == ‘__main__’: main()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

from tkinter import Tk, Canvas, Frame, BOTH

 

 

class Example(Frame):

 

    def __init__(self):

        super().__init__()

        self.initUI()

 

    def initUI(self):

        self.master.title(«Цвета»)

        self.pack(fill=BOTH, expand=1)

 

        canvas = Canvas(self)

        canvas. create_rectangle(

            30, 10, 120, 80,

            outline=»#fb0″, fill=»#fb0″

        )

 

        canvas.create_rectangle(

            150, 10, 240, 80,

            outline=»#f50″, fill=»#f50″

        )

 

        canvas.create_rectangle(

            270, 10, 370, 80,

            outline=»#05f», fill=»#05f»

        )

 

        canvas.pack(fill=BOTH, expand=1)

 

 

def main():

    root = Tk()

    ex = Example()

    root.geometry(«400×100+300+300»)

    root.mainloop()

 

 

if __name__ == ‘__main__’:

    main()

В данном примере мы нарисовали прямоугольники и закрасили их разными цветами. Мы ранее работали с выбором цвета в Tkinter используя диалоговое окно цветовой палитры.

Python

canvas = Canvas(self)

canvas = Canvas(self)

Мы создали виджет canvas.

Python

canvas.create_rectangle( 30, 10, 120, 80, outline=»#fb0″, fill=»#fb0″ )

canvas.create_rectangle(

    30, 10, 120, 80,

    outline=»#fb0″, fill=»#fb0″

)

Есть вопросы по Python?

На нашем форуме вы можете задать любой вопрос и получить ответ от всего нашего сообщества!

Python Форум Помощи

Telegram Чат & Канал

Вступите в наш дружный чат по Python и начните общение с единомышленниками! Станьте частью большого сообщества!

Паблик VK

Одно из самых больших сообществ по Python в социальной сети ВК. Видео уроки и книги для вас!

Подписаться

С помощью create_rectangle() мы создаем прямоугольник на холсте. Первыми четырьмя параметрами являются x и y координаты двух ограничительных точек: верхней левой и нижней правой.

При помощи параметра outline мы можем задать цвет контура прямоугольников. А параметр fill используется для окрашивания всей внутренней области прямоугольника.

Рисуем различные формы в Tkinter

На холсте мы можем нарисовать самые разнообразные формы. На представленном ниже примере показаны некоторые из них.

shapes.py

Python

from tkinter import Tk, Canvas, Frame, BOTH class Example(Frame): def __init__(self): super().__init__() self.initUI() def initUI(self): self.master.title(«Рисуем формы») self.pack(fill=BOTH, expand=1) canvas = Canvas(self) # Овальная форма. canvas.create_oval( 10, 10, 80, 80, outline=»#f11″, fill=»#1f1″, width=2 ) # Овальная форма. canvas. create_oval( 110, 10, 210, 80, outline=»#f11″, fill=»#1f1″, width=2 ) # Рисуем прямоугольник. canvas.create_rectangle( 230, 10, 290, 60, outline=»#f11″, fill=»#1f1″, width=2 ) # Рисуем дугу. canvas.create_arc( 30, 200, 90, 100, start=0, extent=210, outline=»#f11″, fill=»#1f1″, width=2 ) points = [ 150, 100, 200, 120, 240, 180, 210, 200, 150, 150, 100, 200 ] # Рисуем многоугольник. canvas.create_polygon(points, outline=’#f11′, fill=’#1f1′, width=2) canvas.pack(fill=BOTH, expand=1) def main(): root = Tk() ex = Example() root.geometry(«330×220+300+300») root.mainloop() if __name__ == ‘__main__’: main()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

from tkinter import Tk, Canvas, Frame, BOTH

 

class Example(Frame):

 

    def __init__(self):

        super(). __init__()

        self.initUI()

 

    def initUI(self):

        self.master.title(«Рисуем формы»)

        self.pack(fill=BOTH, expand=1)

 

        canvas = Canvas(self)

 

        # Овальная форма.

        canvas.create_oval(

            10, 10, 80, 80, outline=»#f11″,

            fill=»#1f1″, width=2

        )

 

        # Овальная форма.

        canvas.create_oval(

            110, 10, 210, 80, outline=»#f11″,

            fill=»#1f1″, width=2

        )

 

        # Рисуем прямоугольник.

        canvas.create_rectangle(

            230, 10, 290, 60,

            outline=»#f11″, fill=»#1f1″, width=2

        )

 

        # Рисуем дугу.

        canvas.create_arc(

            30, 200, 90, 100, start=0,

            extent=210, outline=»#f11″, fill=»#1f1″, width=2

        )

 

        points = [

            150, 100, 200, 120, 240, 180, 210,

            200, 150, 150, 100, 200

        ]

 

        # Рисуем многоугольник.

        canvas.create_polygon(points, outline=’#f11′,

            fill=’#1f1′, width=2)

 

        canvas.pack(fill=BOTH, expand=1)

 

 

def main():

    root = Tk()

    ex = Example()

    root.geometry(«330×220+300+300»)

    root.mainloop()

 

 

if __name__ == ‘__main__’:

    main()

Мы нарисовали разные формы в окне:

  • круг;
  • овал;
  • прямоугольник;
  • дугу и многугольник.

Контур окрашен в красный цвет, фигуры были наполнены зеленым цветом. Ширина контура указана в 2 пикселя.

Python

canvas.create_oval( 10, 10, 80, 80, outline=»red», fill=»green», width=2 )

canvas.create_oval(

    10, 10, 80, 80, outline=»red»,

    fill=»green», width=2

)

Метод create_oval() используется для того, чтобы создать круг в Tkinter. Первые четыре параметра определяют ограничивающие координаты фигуры. Иными словами, это x и y координаты верхней левой и правой нижней точек квадрата, в который помещен круг.

Python

canvas.create_rectangle( 230, 10, 290, 60, outline=»#f11″, fill=»#1f1″, width=2 )

canvas.create_rectangle(

    230, 10, 290, 60,

    outline=»#f11″, fill=»#1f1″, width=2

)

Мы нарисовали прямоугольник в Tkinter. Координаты снова обозначают ограничительные точки с координатами x и y..

Python

canvas.create_arc( 30, 200, 90, 100, start=0, extent=210, outline=»#f11″, fill=»#1f1″, width=2 )

canvas.create_arc(

    30, 200, 90, 100, start=0,

    extent=210, outline=»#f11″, fill=»#1f1″, width=2

)

С помощью этого кода мы создаем дугу. Дуга является частью круга. Мы указывает ограничительные координаты нашей дуги.

Успейте заказать просмотры на видео в YouTube ДокторСмм по наиболее дешевой цене с большими оптовыми скидками. Кроме того, с заказом Вы сможете получить также персональные условия на приобретение ресурса с возможностью выбора более подходящей для Вашей ситуации скорости поступления просмотров. Торопитесь, скидки действуют ограниченное время!

С помощью параметра start мы устанавливаем угол дуги. Параметр extent указывает на размер угла.

Python

points = [ 150, 100, 200, 120, 240, 180, 210, 200, 150, 150, 100, 200 ] canvas.create_polygon( points, outline=’red’, fill=’green’, width=2 )

1

2

3

4

5

6

7

8

9

points = [

    150, 100, 200, 120, 240, 180, 210,

    200, 150, 150, 100, 200

]

 

canvas. create_polygon(

    points, outline=’red’,

    fill=’green’, width=2

)

Данный код позволяет нам создать многоугольник. У этой фигуры присутствует большое количество углов. Чтобы создать многоугольник в Tkinter, нам нужно задать несколько координат, используя метод create_polygon().

Вставляем изображение в Canvas

В данном примере мы рассмотрим, как вставить изображение в canvas виджете.

В данном примере используется файл изображения tatras.jpg который нужно сохранить рядом с нами кодом:

  • tatras.jpg

draw_image.py

Python

from tkinter import Tk, Canvas, Frame, BOTH, NW from PIL import Image, ImageTk class Example(Frame): def __init__(self): super().__init__() self.initUI() def initUI(self): self. master.title(«Изображение в Canvas») self.pack(fill=BOTH, expand=1) self.img = Image.open(«tatras.jpg») self.tatras = ImageTk.PhotoImage(self.img) canvas = Canvas( self, width=self.img.size[0]+20, height=self.img.size[1]+20 ) canvas.create_image(10, 10, anchor=NW, image=self.tatras) canvas.pack(fill=BOTH, expand=1) def main(): root = Tk() ex = Example() root.mainloop() if __name__ == ‘__main__’: main()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

from tkinter import Tk, Canvas, Frame, BOTH, NW

from PIL import Image, ImageTk

 

 

class Example(Frame):

 

    def __init__(self):

        super(). __init__()

        self.initUI()

 

    def initUI(self):

        self.master.title(«Изображение в Canvas»)

        self.pack(fill=BOTH, expand=1)

 

        self.img = Image.open(«tatras.jpg»)

        self.tatras = ImageTk.PhotoImage(self.img)

 

        canvas = Canvas(

            self, width=self.img.size[0]+20,

            height=self.img.size[1]+20

        )

 

        canvas.create_image(10, 10, anchor=NW, image=self.tatras)

        canvas.pack(fill=BOTH, expand=1)

 

 

def main():

    root = Tk()

    ex = Example()

    root.mainloop()

 

 

if __name__ == ‘__main__’:

    main()

В примере продемонстрировано как добавить изображение в Canvas.

Python

self.img = Image.open(«tatras.jpg») self.tatras = ImageTk.PhotoImage(self.img)

self. img = Image.open(«tatras.jpg»)

self.tatras = ImageTk.PhotoImage(self.img)

Из библиотеки Pillow мы используем модули Image и ImageTk.

Python

canvas = Canvas( self, width=self.img.size[0]+20, height=self.img.size[1]+20 )

canvas = Canvas(

    self, width=self.img.size[0]+20,

    height=self.img.size[1]+20

)

Мы создаем виджет Canvas. Учитываем размеры изображения. Холст будет на 20 пикселей шире и на 20 пикселей выше, нежели наше изображение.

Python

canvas.create_image(10, 10, anchor=NW, image=self.tatras)

canvas.create_image(10, 10, anchor=NW, image=self.tatras)

Мы используем метод create_image(), чтобы создать изображение на холсте. Чтобы показать изображение, оно закрепляется в северном и западном направлениях anchor=NW нашего окна. Параметр image позволяет отобразить изображение.

Меняем шрифт и рисуем текст в Tkinter

В последнем примере мы рассмотрим рисование текста используя виджет Canvas в Tkinter.

draw_text.py

Python

from tkinter import Tk, Canvas, Frame, BOTH, W class Example(Frame): def __init__(self): super().__init__() self.initUI() def initUI(self): self.master.title(«Текст и Шрифт в Tkinter») self.pack(fill=BOTH, expand=1) canvas = Canvas(self) canvas.create_text( 20, 30, anchor=W, font=»DejavuSansLight», text=»Красное солнце сгорает дотла» ) canvas.create_text( 20, 60, anchor=W, font=»Arial», text=»На пылающий город падает тень» ) canvas. create_text( 20, 130, anchor=W, font=»TimesNewRoman», text=»Перемен!» ) canvas.create_text( 20, 160, anchor=W, font=»ComicSans», text=»Требуют наши сердца» ) canvas.create_text( 20, 190, anchor=W, font=»FreeSerif», text=»Перемен!» ) canvas.create_text( 20, 220, anchor=W, font=»LatoThin», text=»Требуют наши глаза» ) canvas.pack(fill=BOTH, expand=1) def main(): root = Tk() ex = Example() root.geometry(«420×250+300+300») root.mainloop() if __name__ == ‘__main__’: main()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

from tkinter import Tk, Canvas, Frame, BOTH, W

 

 

class Example(Frame):

 

    def __init__(self):

        super(). __init__()

        self.initUI()

 

    def initUI(self):

        self.master.title(«Текст и Шрифт в Tkinter»)

        self.pack(fill=BOTH, expand=1)

 

        canvas = Canvas(self)

        canvas.create_text(

            20, 30, anchor=W, font=»DejavuSansLight»,

            text=»Красное солнце сгорает дотла»

        )

 

        canvas.create_text(

            20, 60, anchor=W, font=»Arial»,

            text=»На пылающий город падает тень»

        )

 

        canvas.create_text(

            20, 130, anchor=W, font=»TimesNewRoman»,

            text=»Перемен!»

        )

 

        canvas.create_text(

            20, 160, anchor=W, font=»ComicSans»,

            text=»Требуют наши сердца»

        )

 

        canvas.create_text(

            20, 190, anchor=W, font=»FreeSerif»,

            text=»Перемен!»

        )

 

        canvas. create_text(

            20, 220, anchor=W, font=»LatoThin»,

            text=»Требуют наши глаза»

        )

 

        canvas.pack(fill=BOTH, expand=1)

 

 

def main():

    root = Tk()

    ex = Example()

    root.geometry(«420×250+300+300»)

    root.mainloop()

 

 

if __name__ == ‘__main__’:

    main()

Мы рисуем слова из песни в нашем окне.

Python

canvas.create_text( 20, 30, anchor=W, font=»DejavuSansLight», text=»Красное солнце сгорает дотла» )

canvas.create_text(

    20, 30, anchor=W, font=»DejavuSansLight»,

    text=»Красное солнце сгорает дотла»

)

Первые два параметра – это x и y координаты центральной точки текста. Если мы закрепим текстовый объект по направлению запада anchor=W, текст будет начинаться в этой части окна. Параметр font позволяет нам менять шрифт текста, а параметр text отображает написанный текст в окне.

Vasile Buldumac

Являюсь администратором нескольких порталов по обучению языков программирования Python, Golang и Kotlin. В составе небольшой команды единомышленников, мы занимаемся популяризацией языков программирования на русскоязычную аудиторию. Большая часть статей была адаптирована нами на русский язык и распространяется бесплатно.

E-mail: [email protected]

Образование
Universitatea Tehnică a Moldovei (utm.md)

  • 2014 — 2018 Технический Университет Молдовы, ИТ-Инженер. Тема дипломной работы «Автоматизация покупки и продажи криптовалюты используя технический анализ»
  • 2018 — 2020 Технический Университет Молдовы, Магистр, Магистерская диссертация «Идентификация человека в киберпространстве по фотографии лица»

Как рисовать круги и дуги в HTML Canvas

Обзор

Canvas имеет API для рисования кругов и дуг:

  • arc(x, y, радиус, startAngle, endAngle, против часовой стрелки) : Рисует дугу с центром в точке (x, y) с радиусом r, начиная с startAngle и заканчивая endAngle , войдя внутрь заданное направление указано против часовой стрелки (по умолчанию по часовой стрелке).

  • arcTo(x1, y1, x2, y2, радиус) : Рисует дугу с заданными контрольными точками и радиусом, соединенную с предыдущей точкой прямой линией.

Примечание. Радиус указывается в радианах, а не в градусах. 180180180 градусов следует преобразовать в радианы, иначе API воспримут это как 180180180рад. Мы можем конвертировать градусы в радианы с помощью этого алгоритма: (радианы=(Math.PI/180)*градусы)(радианы=(Math.PI/180)*градусы)(радианы=(Math.PI/180)*градусы).

В приведенных выше методах x,y,x1,y1x, y, x1, y1x,y,x1,y1 являются центральным положением окружности/дуги на сетке canvas . радиус радиус окружности/дуги. startAngle — это угол (в радианах), с которого начинается рисование окружности/дуги. endAngle — это угол (в радианах), при котором трассировка окружности/дуги остановится. antiClockWise — направление трассировки окружности/дуги. Если antiClockWise равно true , окружность/дуга рисуется против часовой стрелки; в противном случае по часовой стрелке.

Поскольку все методы представляют собой дуги, рисовать ими окружность немного сложно.

Пример 

 const degToRad = (градусы) => (Math.PI / 180) * градусы
context.arc(100, 100, 50, degToRad(0), degToRad(360), true)
контекст.stroke()

Это нарисует круг.

Объяснение

Мы устанавливаем центр окружности, чтобы начать с x,yx,yx,y = (100,100)(100,100)(100,100), с радиусом 505050. Мы устанавливаем начальный угол в 000 градусов ( мы используем degToRag для преобразования градусов в радианы) и конечный угол 360360360 градусов, чтобы сделать полный круг. Затем аргумент true заставляет код трассировать окружность против часовой стрелки. Метод stroke() рисует контур круга.

Примеры

Заполним круг методом fill :

 context. arc(100, 100, 50, degToRad(0), degToRad(360), true)
 контекст.заполнить()

Мы можем нарисовать дугу от 000 до 180180180:

 context.arc(100, 100, 50, degToRad(0), degToRad(180), true)
 контекст.stroke()

Это нарисует дугу:

Это потому, что мы начинаем с угла 000 и останавливаемся на 180180180. Если мы изменим 180180180 на 360360360, код нарисует круг.

Теперь создадим закрашенную дугу:

 context.arc(100, 100, 50, degToRad(0), degToRad(180), true)
 контекст.заполнить()

.

Примечание: Пожалуйста, обратитесь к следующим снимкам для получения информации, связанной с этой темой:
Рисование линий и контуров
Рисование треугольников
Заполнение контуров
Рисование прямоугольников

УЧАСТНИК

Чидуме Ннамди

Лицензия: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Дизайны Circle Canvas, темы, шаблоны и загружаемые графические элементы на Dribbble

  1. Посмотреть абстрактную геометрию воскресных кругов

    Воскресные круги абстрактная геометрия

  2. Посмотреть абстрактную круговую иллюстрацию данных

    абстрактная круговая иллюстрация данных

  3. Посмотреть Luceat ’20

    Luceat ’20

  4. Посмотреть экзотический цветовой круг

    экзотический цветной круг

  5. Посмотреть Элемента ’20

    Элемента ’20

  6. Просмотр P004

  7. Посмотреть закат и восход луны

    Закат и восход луны

  8. Wkndshapes № 2

  9. Посмотреть Превращение стен в холст

    Превращение стен в холст

  10. Просмотр Tinkerworks — Предложение логотипа, раунд 2

    Tinkerworks — раунд предложений логотипа 2

  11. View Stir: обзор продукта

    Перемешивание: Обзор продукта

  12. Просмотр чертежа с помощью холста HTML5

    Рисование с помощью холста HTML5

  13. View Moldr — Мобильная концепция 📱

    Moldr — Мобильная концепция 📱

  14. Просмотр холста и кассеты

    Холст и кассета

  15. Посмотреть Абстрактный геометрический лабиринт

    Абстрактный геометрический лабиринт

  16. Посмотреть отпечатки на холсте

    Печать на холсте

  17. Просмотр аналога

    Аналоговый

  18. Посмотреть сумки-тоут «Patience»

    Сумки «Терпение»

  19. Посмотреть красочные волны мелка иллюстрации

    Иллюстрация красочных волн мелками

  20. Просмотреть пространство

  21. Посмотреть печатную иллюстрацию жидкой материи

    Распечатка с изображением жидкости

  22. Посмотреть картину

    покраска

  23. Просмотрите 1,1-секундную заявку Inkscape на конкурс об экране

    Вторая заявка Inkscape 1.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *