CanvasRenderingContext2D.drawImage()

CanvasRenderingContext2D.drawImage() - малює зображення на полотні canvas.

Синтаксис:

ctx.drawImage( img, x, y,width, height, sx, sy, swidth, sheight );

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

img - зображення.

x - координати осі X на полотні.

y - координати осі Y на полотні.

width - ширина на яку малюється зображення на полотні.

height - висота на яку малюється зображення на полотні.

sx - координати осі X на зображенні.

sy - координати осі Y на зображенні.

swidth - ширина частини зображення.

sheight - висота частини зображення.

Опис:

drawImage() метод об'єкту CanvasRenderingContext2D який малює зображення, відео на полотно canvas.

Метод drawImage() дозволяє намалювати частину зображення, збільшене / зменшене зображення.

Метод drawImage() після завантаження зображення. Для того, щоб переконатися що зобрадення було завантажено потрібно викликати drawImage() у події onload.

Приклад:

Ваш браузер не підтримує canvas. var ctx=document.getElementById("canvas").getContext("2d"); var img=document.createElement("img"); img.onload=function(){ ctx.drawImage(img, 0, 0); } img.src="/dani/test.png"; var ctx=document.getElementById("canvas").getContext("2d"); var img=document.createElement("img"); img.onload=function(){ ctx.drawImage(img, 0, 0, 150, 120); } img.src="/dani/test.png";

Копіюємо частину зображення:

var ctx=document.getElementById("canvas").getContext("2d"); var img=document.createElement("img"); img.onload=function(){ ctx.drawImage(img, 0, 0, 150, 120, 0, 0, 100, 100); } img.src="/dani/test.png";