HTML | Canvas beginPath () Метод
Опубликовано: 27 Февраля, 2022
Метод Canvas beginPath () используется для начала пути или сброса текущего пути. Для создания контуров используются методы moveTo (), lineTo (), quadricCurveTo (), bezierCurveTo (), arcTo () и arc (). Также метод stroke () используется для рисования пути на холсте.
Синтаксис:
context.beginPath ();
Example 1:
<!DOCTYPE html> < html > < head > < title > HTML canvas beginPath() Property </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h2 >HTML canvas beginPath() Property</ h2 > < canvas id = "GFG" width = "500" height = "300" ></ canvas > < script > var GFG = document.getElementById("GFG"); var context = GFG.getContext("2d"); // Create a path context.beginPath(); // Set the path width context.lineWidth = "8"; // Set the path color context.strokeStyle = "green"; context.moveTo(100, 250); context.lineTo(150, 50); context.lineTo(250, 250); context.stroke(); context.beginPath(); </ script > </ body > </ html > |
Выход:
Example 2:
<!DOCTYPE html> < html > < head > < title > HTML canvas beginPath() Property </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < h2 >HTML canvas beginPath() Property</ h2 > < canvas id = "GFG" width = "500" height = "300" ></ canvas > < script > var GFG = document.getElementById("GFG"); var context = GFG.getContext("2d"); // Set the path width context.lineWidth = 5; // Create path context.beginPath(); context.moveTo(100, 20); context.lineTo(230, 200); // Set path color context.strokeStyle = "green"; context.stroke(); // Create another path context.beginPath(); context.moveTo(230, 200); context.quadraticCurveTo(230, 200, 260, 100); // Set path color context.strokeStyle = "blue"; context.stroke(); // Create another path context.beginPath(); context.moveTo(260, 100); context.bezierCurveTo(290, -40, 300, 190, 400, 150); // Set path color context.strokeStyle = "orange"; context.stroke(); context.closePath(); </ script > </ body > </ html > |
Поддерживаемые браузеры: браузеры, поддерживаемые методом HTML Canvas beginPath (), перечислены ниже:
- Гугл Хром
- Internet Explorer 9.0
- Fire Fox
- Сафари
- Опера