<canvas> | Тег HTML - Справочник HTML + HTML5 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник HTML » Изображения


ОбъектыБлочные элементы
ТаблицыСтрочные элементы
СимволыФорматирование
ДокументыИзображения
ЗвукФормы
СпискиУстаревшие теги
ФреймыСкрипты



Адаптивный сайт - aTmpl


<canvas> | Тег HTML

Тег <canvas> устанавливает графику




Тег <canvas> служит для добавления на страницу графики.Работает с JavaScript.Поддерживает глобальные атрибуты,а так же атрибуты событий в HTML5




Синтаксис тега <canvas> ( закрывающий тэг обязателен! )


<canvas id="идентификатор"></canvas>

Тег работает в браузерах





Атрибуты тега <canvas>

Атрибут width

Устанавливает ширину используемого поля для графики

Атрибут height

Устанавливает высоту используемого поля для графики

Пример применения тега


<!DOCTYPE html>
<html>
<head>
<title>Тэг canvas</title>
<style type="text/css">
#pole {
height:200px;
width:99%;
}
</style>
</head>
<body>
<canvas id="pole" ></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 600, 600);
ctx.save();
grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#FF0000');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
ctx.fillStyle = grad;
ctx.fillRect(0,0,600,600);
ctx.save();
body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / height;
var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
grad.addColorStop(0, '#FFF');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
// ctx.restore();
ctx.fillStyle = grad;
 ctx.fillRect(0,0,600,600);
// ctx.save();
};
}
</script>
</body>
</html>

Пример в действии





Русские шрифты





Категория: Изображения | Добавил: IZOTOP (07.06.2012) | Автор: Меренков Михаил W
Просмотров: 837 | Теги: графика | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]