
Рисование на 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]-->