HTML5 Canvas

 <canvas id = ширина mycanvas = 400 высот = 200>

По умолчанию <Canvas> холст отображает пустой, без границы прямоугольник на странице. Чтобы он отобразил контур, добавьте в него пунктирную рамку, определив правила стиля:

 Canvas {border: 1px пунктир черный;}

Чтобы выполнить задачу рисования, во -первых, мы должны получить объект <Canvas>, а затем получить его двухмерный контекст рисования.

Следующая демонстрация образца получает чертеж чертежа при загрузке страницы:

 <script> window.onload = function () {var canvas = document.getElementbyId (myCanvas);

(1) Начальная точка составляет (50,50) ниже (50,50), а точка окончания составляет (150 150) линии прямой линии

 context.moveto (50, 50);

(2) Установите ширину и цвет линий с помощью ширины линии и атрибутов Strokestyle

 // ширина линии. LineWidth = 10; 50);

(3) Установите форму обоих концов линии (тип линии) с свойством LineCap:

1. Приклад: Fangtou (значение по умолчанию)
2. Раунд: круглая голова
3. Квадрат: расширение квадратной головки (эффект аналогичен прикладке, но длина двух линий линии увеличит длину половины ширины линии)

 var canvas = document.getelementbyid (mycanvas); Сторонний контекст.moveto (50, 50); ; Контекст. context.linecap = square;

Приведенный выше пример можно увидеть, что каждый раз, когда нарисован новый сегмент линии, метод startPath () вызывается.

Без этого шага каждый раз, когда вы вызовите Insck (), вы перезаписываете исходный сегмент линии на холсте. Особенно как пример выше, атрибуты контекста должны быть изменены при рисовании новой линии.