HTML5 за 10 минут

Рисование дуг


Элемент управления Canvas допускает также рисование дуг с помощью функции arc, определяемой следующим образом.

arc(float х, float у, float radius, float startAngle, float endAngle, boolean anticlockwise);

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

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

2.   Введите выделенный ниже полужирным код для создания формы из дуг. Обратите внимание на применение константы Math.PI в сценарии JavaScript для получения числового значения пи.

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

{

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

// Дуги

canvasl.beginPath();

canvasl.arc(275, 275, 50, 0, Math.PI  2, true); canvasl.moveTo(310, 275);

canvasl.arc(275, 275, 35, 0, 0.75  Math.PI, false); canvasl.moveTo(300, 255);

canvasl.arc(265, 255, 35, 0, 0.5  Math.PI, false); canvasl.moveTo(280, 255);

canvasl.arc(245, 255, 35, 0, 0.2  Math.PI, false); canvasl.closePath();

canvasl.stroke();

}

</script>

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

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

Рисование текста

На виртуальном полотне элемента управления Canvas допускается также рисование текста. Для этого нужно сначала выбрать подходящий шрифт, а затем установить его типографские параметры в атрибуте font элемента управления Canvas, как показано в приведенной ниже строке кода, canvasl.font = italic 40рх sans-serif;

В этой строке кода JavaScript задается выбираемый по умолчанию шрифт без засечек размером 40 пикселей. Если не хотите

выделять рисуемый текст курсивом, опустите параметр italic в данной строке кода.

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

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

2.   Введите выделенный ниже полужирным код для рисования текста "Привет!".

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

{

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

// Текст

canvasl.font = italic 40px sans-serif; canvasl.strokeText("Привет!", 50, 400);

}

</script>

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

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

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