Справочники HTML5 canvas

Что такое canvas в HTML5?

HTML тег <canvas> необходим для отображения различных JavaScript программ. При помощи этого тега создается специальная область, куда можно вписывать игры, программы, простейшие фигуры, написанные на языке JavaScript.

Также для этого тега стоит использовать атрибут id, благодаря которому мы сможем найти тег в JavaScript и вставить туда программу. Требует закрывающий тег </canvas>.

Атрибуты:

width - здесь вы можете установить ширину области. Изначально она равна 150px.
height - здесь вы можете установить высоту области. Изначально она равна 300px.

JavaScript код небольшой программы:

var canavas = document.getElementById("field");
var c = canavas.getContext("2d");
c.moveTo(0,0);
c.lineTo(300,70);
c.stroke();

// Создаем градиент
var grd = c.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"blue");

// Заполняем область градиентом
c.fillStyle = grd;
c.fillRect(10,100,280,40);

HTML код простейшей формы:

<canvas id="field" style="border: 2px dashed silver"></canvas>

Результат:

Комментарии