Рисование на canvas'е

Рисование на canvas'е

Конспект по рисованию в html5.

<canvas id="canvasid" width="123" height="123"></canvas>

Поддерживается в браузерах: IE 7+, Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, iPhone 1+, Android 1+.
Функции javascript для рисованию:

  var can=$('#canvasid');
  //3d есть только в экспериментальном виде в некоторых браузерах
  var context=can.getContext("2d");

  //x,y,width,height
  context.fillRect(50, 50, 100, 100);
  // закрашивает
  context.fillStyle("solid #000");
  //рисует только границу 
  context.strokeRect(50, 50, 100, 100);
  // почистить прямоугольник 
  context.clearRect(x, y, w, h);

  // при смене размера окна очищается весь холст
  context.width=context.width;
  
  //пути
  context.beginPath();
  context.moveTo(x,y);
  context.lineTo(x2, y2);
  //...
  context.strokeStyle="#eee";
  context.stroke();
  
  //тексты
  context.font="Arial 16px bold";
  context.textAlign="start"; //end, left, right, center
  context.textBaseline="top"; //middle, bottom
  context.fillText("Text", x,y);
  
  //градиенты
  //1. линейный
  var my_gradient=context.createLinearGradient(0,0,100,0);
  // как минимум два цвета
  my_gradient.addColorStop(0, "#000"); 
  my_gradient.addColorStop(0, "#fff");
  context.fillStyle=my_gradient;
  context.fillRect(0,0,100,100);
  
  //2. радиальный
  var my_radial_gradient=context.createRadialGradient(0,0,100,0);
  // ... дальше тоже самое
      
  //картинки
  var image=$("img#source");
  //рисует картинку
  context.drawImage(image, x,y);
  //масштабирует до scale_w x scale_h и рисует картинку
  context.drawImage(image, x,y, scale_w, scale_h);
  //вырезает прямоугольник (sx,sy,dx,dy) из
  context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
  // исходного изображения и рисует его в (dx,dy,dw,dh)
  // загрузить картинку и нарисовать:
  var cat = new Image();
  cat.src = "..."; 
  cat.onload = function(){context.drawImage(cat, x, y)};	

Чтобы все это работало в ie, надо подключить библиотеку excanvas:

  <!--[if IE]>
     <script src="excanvas.js"></script>
  <![endif]-->

Похожие записи

• Работа с массивами в jquery
• jQuery.animate и css transform
• HTML5 CSS3 таблица с закругленными краями
• Проверка поддержки элементов html5 в браузере