Пример 3 использования изображения
В этом примере мы будем вырезать голову носорога и вставлять ее в рамку.
В этом примере мы используем другой подход к загрузке изображений, чем в примере выше.Мы просто размечаем изображения непосредственно в HTML документе и используем правила CSS, чтобы скрыть их. Обоим изображениям мы присваиваем атрибут id чтобы их было легче выбрать. Скрипт сам по себе очень прост. Сначала мы вырезаем голову носорого и помещаем ее на холст а, затем помещаем изображение рамки на холст.
Посмотреть этот пример
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Draw slice
ctx.drawImage(document.getElementById('source'),
33,71,104,124,21,20,87,104);
// Draw frame
ctx.drawImage(document.getElementById('frame'),0,0);
}
Пример галереи
В
финальном примере мы сделаем простую
галерею изображений. Галерея состоит
из таблицы содержащей несколько
изображений. При загрузке страницы
каждое изображение вставляется на холст
а, затем и рамка вокруг него.
Код ниже, должен говорить сам за себя. Мы используем цикл и добавляем новые элементы на холст. Наверное, единственное, что можно отметить, для тех, кто не очень знаком с DOM, является использование insertBefore метода. insertBefore это метод родительского узла (ячейки таблицы) в который мы хотим вставить наш новый узел (холст).
Посмотреть этот пример
function draw() {
// Loop through all images
for (i=0;i<document.images.length;i++){
// Don't add a canvas for the frame image
if (document.images[i].getAttribute('id')!='frame'){
// Create canvas element
canvas = document.createElement('CANVAS');
canvas.setAttribute('width',132);
canvas.setAttribute('height',150);
// Insert before the image
document.images[i].parentNode.insertBefore(canvas,document.images[i]);
ctx = canvas.getContext('2d');
// Draw image to canvas
ctx.drawImage(document.images[i],15,20);
// Add frame
ctx.drawImage(document.getElementById('frame'),0,0);
}
}
}
Итак существует три перегруженных функции drawImage:
drawImage(pic, 0, 0); // Рисуем изображение от точки с координатами 0, 0
drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// Первый параметр указывает то, какое изображение обрабатывать
// sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике
// dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте
Метод CLIP()
Метод позволяет вырезать изображение по заранее созданной маске.
<html>
<head>
<canvas id="myCanvas" width="800" height="700" >Треугольное изображение</canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
//Создается маска
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip(); //Вырезается кусок канвы
ctx.drawImage(img1,0,0); // Строится изображение
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Если теперь еще раз изменить маску, то она отрежет оставшуюся часть канвы
<html>
<head>
<canvas id="myCanvas" width="800" height="700" ></canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip(); //Вырезается кусок канвы
ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(200,100);
ctx.lineTo(200,150);
ctx.lineTo(50,150);
ctx.closePath();
ctx.clip(); //Еще раз Вырезается кусок канвы
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Для того, чтобы при повсторном разрезании осталась прежняя канва исполбзуются методы ctx.save() и ctx.restore(). Вызов функций save() перед операцией обрезания и restore() после нее позволяют вернуть canvas в первоначальное состояние.
<html>
<head>
<canvas id="myCanvas" width="800" height="700" ></canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.save(); //сохранение канвы
ctx.clip(); //вырезание участка канвы
ctx.restore(); //возвращение прежней канвы
ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(200,100);
ctx.lineTo(200,150);
ctx.lineTo(50,150);
ctx.closePath();
ctx.clip();
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Метод ROTATE()
Метод ROTATE(alfa)позволяет повернуть изображение на уголalfaвыраженный в радианах. Например,
<html>
<head>
<canvas id="myCanvas" width="800" height="700" ></canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip();
ctx.rotate(0.5);
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Смещение канвы
В некоторых случаях приходится указывать участок экрана, на котором будет размещаться канва
<html>
<head>
<canvas id="myCanvas" width="500" height="500" style="position: absolute; top:10px; margin: 0px; border: 2px solid black;">
Ваш браузер не поддерживает Canvas.
</canvas>
<script type='text/javascript'>
myCanvas.style.top = "200px";
myCanvas.style.left = "200px";
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
ctx.clip();
ctx.rotate(0.5);
ctx.drawImage(img1,0,0);
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Задание на выполнение лабораторной работы
1. Создать прямоугольное изображение с изменяющимися во времени размерами.
2. Создать изображение оганиченное окружностью с изменяющимся во времени диаметром.
3. Создать вращающееся изображение вокруг собственной оси.
4. Создать изображение вращающееся вокруг верикальной оси.
Использованные источники
http://html5insight.ru/
Работа с графикой