Canvas для работы с графикой
<canvas> это новый элемент HTML5, который предназначен для создания
графики при помощи JavaScript.
Примеры использования
рисование графиков
создание фото-композиций
создание простых анимаций
Консорциум разработал прикладной программный интерфейс для элемента <canvas>
Некоторые функции этого интерфейса:
стилевое оформление
установка стилей рисования линий
отбрасывание теней
рисование прямоугольников
рисование сложных фигур
рисование текста
рисование изображений
выполнение преобразований:
oповорот на заданный угол
oмасштабирование
oперемещение
Элемент <canvas>
служит для отображения графики на виртуальном полотне. Атрибуты
width
height
Стиль <canvas> можно изменять
Если никакие настройки стиля не заданы, canvas будет создан полностью прозрачным.
Рисование
Метод getContext - предназначен для получения контекста отрисовки вместе с его функциями рисования
Минимальный шаблон
<html>
<head>
<title>myCanvas</title> <script >
function draw()
{var canvas = document.getElementById('canvas'); if (canvas.getContext)
{var ctx= canvas.getContext('2d');}
}
</script>
<style type="text/css"> canvas { border: 1px solid
</style>
black; }
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">
</canvas>
</body>
</html>
Координатная сетка
Прямоугольники
Функции:
fillRect(x,y,width,height) рисует заполненный прямоугольник
strokeRect(x,y,width,height) рисует границы прямоугольникаclearRect(x,y,width,height) очищает заданную область
lineWidth – толщина линии
Пример3 function draw()
{ var canvas = document.getElementById('canvas'); if{(canvas.getContext)
var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60);
} ctx.strokeRect(50,50,50,50);
}
Рисование путей
beginPath() - метод очищает список путей (линии, дуги и т.п.), образующих фигуру
closePath() - метод пытается закрыть фигуру, рисуя прямую линию от текущей точки до начальной
stroke() - прорисовывает фигуру на холсте (только рамку)
fill() - прорисовывает фигуру на холсте (залитую фигуру). Любая открытая фигура будет автоматически закрыта
Пути
moveTo(x, y) - x и y - координаты начала новой линии. lineTo(x, y) - линия, x и y, - координаты конечной точки линии.
Код, рисующий треугольник: ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill();
Работа со стилями линий
Свойство lineCap - форма начальных и конечных точек линий round —вид кружков
square —вид квадратиков
Окружности, дуги
arc(x, y, radius, startAngle, endAngle, anticlockwise) - дуга
x и y - координаты центра radius - радиус
startAngle и endAngle - точки начала и конца арки в радианах
Начальный и конечный углы отмеряются от оси x.
anticlockwise (логический) - true, то дуга рисуется против часовой стрелки.
Пример 4 ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Внешний круг ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Рот ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Левый глаз ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Правый глаз ctx.stroke();
Безье и квадратичные кривые
quadraticCurveTo(cp1x, cp1y, x, y) - квардатичная кривая Безье bezierCurveTo(cp1x,cp1y,cp2x,cp2y, x, y) - кубическая кривая Безье
x и y - конечна точка
cp1x и cp1y - первая контрольная точка cp2x и cp2y - вторая контрольная точка
http://tinyurl.com/html5quadratic
Трансформации
translate(x, y) перемещение системы координат на x и y пикселей rotate(alfa) вращение системы координат
Использование изображений
Внешние изображения могут быть формата:
png
gif
jpeg
Импортирование картинок:
определяем ссылку на объект JavaScript image или на другой элемент canvas, как источник
рисуем картинку на canvas, используя функцию drawImage Варианты использования drawImage
1.drawImage(img,x,y)
x,y – координаты верхнего левого угла
Пример_9
var img = new Image(); img.src = 'canvas.jpg'; img.onload = function(){
ctx.drawImage(img,0,0);
2. drawImage(image,x,y,width,height) width и height - ширина и высота изображения на холсте.