Конспект по рисованию в 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]-->
Русский
/
English
Спасибо за обращение.