HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Что такое <canvas>?

Начинаю разбирать canvas. В этой шпаргалке вкратце расммотрим что это такое и с чем его едят.

<canvas> — это новый элемент html5, который позволяет создавать изображения на сайте с помощью js.

Впервые canvas предложил Apple, затем его подхватили FireFox и Opera. Т.е. сейчас этот тег поддерживают Safafi, Chrome, FireFox 1.5+, Opera9+. IE6, IE7, IE8 его не поддерживают (есть фикс). Но в IE9 уже обещают включить его поддержку.

Основы

В html выглядит так:

<canvas width="150" height="150">У вас не поддерживается canvas</canvas>

Элемент canvas имеет только 2 необязательных атрибута width и height. Если они не заданы, то canvas будет создан шириной в 300px и 150px высотой. К нему также можно применять стили border, margin, background и т.п. Внутри canvas пишем сообщение браузеру, не поддерживающему canvas.

Контекст отрисовки

canvas создает поверхность для рисования, дающую контекст отрисовки, которая используется для создания отображаемого контента и манипуляций с ним. Здесь рассмотрим 2D (двумерный) контекст отрисовки, который сейчас является единственным определенным контекстом. В будущем скорее всего будет добавлен 3D контекст и другие.

Изначально canvas пустой, и необходимо задать контекст отрисовки и уже в нем рисовать. Делается это так:

1
2

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

Сначала обращаемся к канвасу через его id, потом получаем контекст отрисовки с помощью команды getContext.

Проверка поддержки

Проверить поддержку canvas с помощью js можно так:

1
2
3
4
5
6
7

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Минимальный шаблон canvas

Код минимального шаблона canvas, в котором будем рисовать:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

Скачать шаблон

Как видно, при загрузке body рисуется canvas с шириной и высотой 150 и с черным бордером в 1px.

Пример для затравки

Нарисуем 2 прямоугольника, наложенные друг на друга, и с верхним, имеющий полупрозрачность:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Посмотреть пример

На этом закончим первую из статей про canvas. Продолжение следует. Если уж совсем невтерпеж, то полная статья находится тут: https://developer.mozilla.org/index.php?title=ru/%D0%9E%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_canvas

Метки: ,

Запись опубликована 08.09.2010 в 17:25 и размещена в рубрике html, java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос