HTML5 за 10 минут

Рисование кривых второго порядка


Помимо кривых Безье, представленных в предыдущем задании, можно также рисовать кривые второго порядка, используя функцию quadraticCurveTo(), определяемую следующим образом.

quadraticCurveTo(float срх, float cpyf float x# float y);

В этом задании вам предстоит нарисовать форму, состоящую из кривых второго порядка.

1.   Откройте HTML-документ из файла canvas.html в избранном вами редакторе текста, например в Windows WordPad.

2.   Введите выделенный ниже полужирным код для создания формы из кривых второго порядка.

<script type="text/javascript"> function loader()

{

var canvas = document.getElementByld (canvas); var canvasl = canvas.getContext(2d);

// Кривые второго порядка canvasl.strokeStyle = rgba(0, 0, 0, l)w; canvasl.beginPath(); canvasl.moveTo(275, 125); canvasl.quadraticCurveTo(225, 125, 225, 162); canvasl.quadraticCurveTo(260, 200, 265, 200); canvasl.quadraticCurveTo(325, 200, 325, 162); canvasl.quadraticCurveTo(325, 125, 275, 125); canvasl.closePath(); canvasl.stroke();

}

</script>

3.   Сохраните внесенные изменения в файле canvas.html. Непременно сделайте это в текстовом формате.

Результаты загрузки HTML-документа из файла canvas. html в браузер приведены на 2.6. Справа внизу в окне браузера появляется форма, состоящая из нарисованных кривых второго порядка.

Комментарии закрыты