Эта статья в основном представляет примеры рисования прямоугольников на холсте HTML5. В этой статье используются три API: FillRect, Strokerect и ClearRect. Друзья, которые это нужно, могут ссылаться на это.
Эта статья переводится с Canvas Steve Fulton & Jeff Fulton HTML5, глава 2, основной формы прямоугольника.
Давайте посмотрим на простую геометрическую форму, встроенную в холст - рисует прямоугольники. В холсте есть три способа нарисовать прямоугольник: заполнение, ход (стрелок) и прозрачная. Конечно, мы также можем использовать пути для изображения всех фигур, включая прямоугольники.
Вот API для трех вышеуказанных методов:
1. Выполнение (x, y, ширина, высота). Нарисуйте твердый прямоугольник, начиная с (x, y), ширины и высоты.
2. Строкерек (x, y, ширина, высота). Нарисуйте прямоугольную коробку, начиная с (x, y), ширины и высоты. Прямоугольная коробка будет представлена в разных стилях в соответствии с текущими настройками, свойствами Linewidth, Linejoin и Mitherlimit.
3. Клиререт (x, y, ширина, высота). Очистите прямоугольную область, начиная с (x, y), ширины и высоты, что делает ее полностью прозрачной.
Прежде чем вызывать вышеуказанный метод для рисования холста, нам нужно установить стиль заполнения и хода. Самый простой способ установить эти стили-использовать 24-разрядные цвета (обозначаемые в шестнадцатеричных струнах). Вот простой пример:
Скопировать код