HTML5 за 10 минут

Рисование штриховых рисунков


С помощью элемента управления Canvas можно рисовать штриховые рисунки. Этот процесс начинается с функции beginPath(), уведомляющей элемент управления Canvas о том, что создается фигура. А затем с помощью функций moveTo() и lineTo() задается исходное положение для рисования и фактически рисуются прямые линии.

По завершении рисования фигуры вызывается функция closePath(), замыкающая контур нарисованной фигуры. После этого фигура обводится по контуру с помощью функции stroke () для получения окончательного результата рисования.

Итак, продолжим рассматриваемый здесь пример, нарисовав три треугольника описанным выше способом. А для того чтобы нарисовать их красным цветом, установим этот цвет в атрибуте strokeStyle следующим образом.

canvas1.strokeStyle = "rgba(200, 0, 0, 0.5)";

Для того чтобы нарисовать треугольники в виде штриховых рисунков, выполните следующие действия.

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

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

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

{

var canvas = document.g6tElementById (canvas); var canvas1 = canvas.getContext(2d);

// Штриховые треугольники canvas1.beginPath();

canvas1.strokeStyle = ”rgba(200, 0, 0, 0.5)”;

canvasl.moveTo(110, 205);

canvasl.lineTo(110, 125);

canvasl.lineTo(30, 205);

canvas1.closePath();

canvas1.stroke();

canvasl.beginPath(); canvasl.moveTo(100, 205); canvasl.lineTo(100, 125); canvasl.lineTo(20, 205); canvas1.closePath(); canvas1.stroke();

canvas1.beginPath(); canvasl.moveTo(90, 205); canvasl.lineTo(90, 125); canvasl.lineTo(10, 205); canvas1.closePath(); canvas1.stroke();

}

</script>

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

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

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