HTML5 за 10 минут

Заполнение штриховых рисунков


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

В данном случае штриховой треугольник рисуется таким же образом, как и те штриховые фигуры, которые упоминались в предыдущем задании. И делается это с помощью все тех же функций beginPath(), moveTo(), lineTo() и closePath(). Но на этот раз вместо функции stroke () используется функция fill ().

Функция fill () заполняет нарисованную форму текущим цветом заполнения виртуального полотна, который задается в атрибуте fillStyle. В частности, светло-зеленый цвет заполнения задается в следующей строке кода, canvasl.fillStyle = "rgba(0# 200, 0, 0.5)";

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

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

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

Рисование кривых Безье

Рисование линий не ограничивается только прямыми, проводимыми из одной точки в другую с помощью функции lineTo. Используя функцию bezierCurveTof), можно также рисовать кривые линии Безье. Эта функция определяется следующим образом.

bezierCurveTo(float cplx, float cply, float cp2x# float cp2y, float x, float y);

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

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

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

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

{

var canvas = document.getElementByld (canvas);

var canvas 1 = canvas.getContext(2d);

// Форма сердечка

canvasl.fillStyle = Mrgba(200, 0, 0, 0.5)"; canvas1.beginPath(); canvasl.moveTo(75, 250);

canvasl.bezierCurveTo(75, 247, 70, 235, 50, 235); canvasl.bezierCurveTo(20, 235, 20, 272.5, 20, 272); canvasl.bezierCurveTo(20, 290, 40, 312, 75, 330); canvasl.bezierCurveTo(110, 312, 130, 290, 130, 272); canvasl.bezierCurveTo(130, 272.5, 130, 235, 100, 235); canvasl.bezierCurveTo(85, 235, 75, 247, 75, 250); canvas1.closePath(); canvasl.fill();

}

</script>

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

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

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