CanvasRenderingContext2D.beginPath()

CanvasRenderingContext2D.beginPath() - створює новий контур.

Синтаксис:

ctx.beginPath();

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

Опис:

beginPath() метод об'єкту CanvasRenderingContext2D який створює новий контур, спорожнює попередні контури.

Щоб закрити контур використовуйте метод closePath().

Створювати новий контур необхідно коли ви малюєте ліні, коло, еліпс і т.п. в іншому випадку будуть замальовані попередні контури які були створені (наприклад методом lineTo(), arc()).

Для малювання контуру на полотні canvas необхідно визвати методи stroke() або fill().

Приклад:

Ваш браузер не підтримує canvas. <canvas id="canvas"><b style="color:red;">Ваш браузер не підтримує canvas.</b></canvas> var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.beginPath(); //створюємо новий контур //малюємо контури crt.moveTo(10, 10); crt.lineTo(55, 10); crt.lineTo(55, 65); crt.closePath(); //закриваємо контур crt.stroke(); //обмальовуємо контур var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.beginPath(); //створюємо новий контур //малюємо контури crt.moveTo(10, 10); crt.lineTo(55, 10); crt.lineTo(55, 65); crt.closePath(); //закриваємо контур crt.fill(); //замальовуємо контур var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.beginPath(); //малюємо контури crt.moveTo(1, 1); for(i=1, j=1; i<canvas.height; i+=5, j+=6){ crt.lineTo(i, j); crt.lineTo(j, i); } crt.closePath(); crt.fillStyle="#010059"; crt.fill();