Основы HTML5

HTML5 API

HTML5 Медиа

HTML5 Графика

Очистка канваса в HTML5 Обводка и заливка на Canvas в HTML5

Рисование прямоугольников на Canvas в HTML5

Одной из самых легких форм для рисования на элементе канва HTML5 является прямоугольник. Вы можете использовать функции fillRect() и strokeRect() 2D контекста.

Онлайн пример

Одной из самых легких форм для рисования на элементе канва HTML5 является прямоугольник. Вы можете использовать функции fillRect() и strokeRect() 2D контекста. Вот простой пример:

Пример

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">　　　　
Canvas не поддерживается в HTML5　　　　
</canvas>　　　　
<script>　　　　　　　
var canvas = document.getElementById("ex1");　　　　
var　context　=　canvas.getContext("2d");　　　　
context.fillStyle　=　"#ff0000";　　　　
context.fillRect(10,10,　100,100);　　　　
context.strokeStyle　=　"#0000ff";　　　　
context.strokeRect(30,20,　120,110);　　　　　　
</script>

Проверим, посмотрим </>

Ширина линии - lineWidth

Вы можете установить ширину линии обводки прямоугольника с помощью свойства lineWidth 2D контекста. Способ следующий:

Пример

<canvas id="ex4" width="500" height="150" style="border: 1px solid #cccccc;">　　　　
Canvas не поддерживается в HTML5　　　　
</canvas>　　　　
<script>　　　　　　　
var canvas = document.getElementById("ex4");　　　　
var　context　=　canvas.getContext("2d");　　　　
var x = 10;　　　　
var y = 10;　　　　
var width = 100;　　　　
var height = 100;　　　　
context.lineWidth = 4;　　　　
context.strokeRect(x, y, width, height);　　　　　　
</script>

Проверим, посмотрим </>

Вот как выглядит прямоугольник с шириной линии 4:

Цвет прямоугольника

Вы можете установить цвет рисования прямоугольника с помощью свойства fillStyle или strokeStyle 2D контекста. Это первый пример, эти настройки выделены жирным:

Пример

<canvas id="ex5" width="500" height="150" style="border: 1px solid #cccccc;">　　　　
Canvas не поддерживается в HTML5　　　　
</canvas>　　　　
<script>　　　　　　　
var　canvas　　=　document.getElementById("ex5");　　　　
var　context　=　canvas.getContext("2d");　　　　
context.fillStyle　=　"#ff0000";　　　　
context.fillRect(10,10,　100,100);　　　　
context.strokeStyle　=　"#0000ff";　　　　
context.strokeRect(30,20,　120,110);　　　　
</script>

Проверим, посмотрим </>

Это прямоугольник, нарисованый снова на канвасе:

Очистка канваса в HTML5 Обводка и заливка на Canvas в HTML5