Главная / Верстка / Теги html / canvas тег html

canvas тег html


14.07.2013 01:132460

Описание

Тег canvas используется в html для создания области , в которой  можно рисовать разные объекты ,  выводить и трансформировать  изображения , изменять  их свойства  ,  создавать  анимацию , игры ,   рисунки .

Для того чтобы создать элемент с помощью canvas , нужно задать идентификатор ID . Также задать ширину width  и высоту height . Canvas является всего лишь контейнером для графики. Для того чтобы производить различные действия , необходимо включить сценарии JS.
 

Атрибуты

АТРИБУТ ЗНАЧЕНИЕ ОПИСАНИЕ
width pixels ширина холста  
height pixels высота холста

Пример

<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8"> 
<title>Тег canvas</title> 
</head>

<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;">your browser does not support the canvas tag</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0000FF';
ctx.fillRect(50, 100, 100, 200);
</script>
</body>

</html>


Результатом  выполнения данного кода будет холст размером 300*300 с изображенным на нем  прямоугольником 100px * 200px синего цвета c отступом слева 50 и сверху 100 .

Цвет прямоугольника задается в строчке  ctx.fillStyle='#0000FF';

Позиционирование  Х , позиционирование У , ширина , высота ,  задается в строчке  

ctx.fillRect(50,100,100,300);

Для сдвига влево-вправо меняем первое число

Для сдвига вверх-вниз  меняем второе число

Для изменения ширины фигуры меняем третье число  

Для обозначения высоты фигуры меняем четвертое число

 

 

 


Синтаксис html и наличие закрывающего тега

Синтаксис Закрывающий тег
<canvas id="..">...</canvas> обязателен

Браузеры поддерживающие <canvas>

Element
<canvas> 4.0 9.0 2.0 3.1 9.0


Canvas , Html , Тег , Тег Canvas





«canvas тег html» - Похожие страницы

canvas интерактивный градиент canvas - интерактивный градиент фона В данном примере можно увидеть как с помощью применения тега  canvas  и java script можно создать интерактивный градиент реагирующий на движение мышки. Получается очень красиво , блик света как будто отражае...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям