Лабораторные работы МИРЭА JavaScript (1017114), страница 14
Текст из файла (страница 14)
drawImage(image, x, y)
Где image это идентификатор изображения а, x и y положение на холсте по оси ординат и абсцис соответственно.
Пример 1 использования изображения
В следующем примере мы будем использовать внешнее изображение как фон для небольшого графика. Использование фона позволяет сделать скрипт значительно быстрее. Здесь мы используем только одно изображение поэтому используем событие onload для запуска функции. С помощью метода drawImage мы позиционируем фон на координатах (0,0) то есть в верхнем левом углу холста
<html>
<head>
<canvas id="myCanvas" width="800" height="700" > изображение</canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image();
img.src = 'd:/MySite/forest.jpg';
function draw(){
ctx.drawImage(img,0,0); // Строится изображение
}
</script>
</head>
<body onload='draw()'>
</body>
</html>
На изображении можно рисовать
пример
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'images/backdrop.png';
}
Масштабирование
В
торой вариант использования метода drawImage отличается от первого тем что в нем присутствуют параметры масштабного отображения на холсте.
drawImage(image, x, y, width, height)
Где width и height ширина и высота изображения на холсте.
Пример 2 использования изображения
В этом примере мы используем одно изображение как обои чтобы повторить его на холсте несколько раз. Это осуществляется с помощью цикла и размещения масштабных изображений на разных позициях. В этом примере первый цикл for отсчитывает ряды а второй цикл for отсчитывает колоны. Изображение равно одной третьей исходного изображения (50x38 пикселей).
Примечание: При масштабировании изображение теряет качество, а текст теряет очертания.
Посмотреть этот пример
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
for (i=0;i<4;i++){
for (j=0;j<3;j++){
ctx.drawImage(img,j*50,i*38,50,38);
}
}
}
img.src = 'images/rhino.jpg';
}
Разрезание изображений
Третий и последный типа метода drawImage включает 8 новых параметров. Мы будем использовать этот метод чтобы отбражать часть изображения на холсте
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Первый параметр image, определяет идентификатор изображения. Следующие 2 элемента определяют положения верхнего левого угла вырезаного изображения относительного исходного положения а, следующие два параметра определяют высоту и ширину вырезаного изображения. Следующие два параметра определяют положение изображения на холсте а, следующие два параметра масштаб изображения.
Разрезание можно использовать чтобы обьеденить все элементы в один файл, что позволяет ускорить работу сайта а, также не загружать все элементы по отдельности.
Пример 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()'>
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
