drawImage lienzo HTML método ()

Para usar la imagen:

el grito

Ejemplos

Para dibujar una imagen en la parte superior de la tela:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "gritar");
img.onload = function () {
ctx.drawImage (img, 10,10);
}

Trate »

Soporte para el navegador

Internet Explorer 9, el método de Firefox, Opera, Chrome y Safari drawImage apoyo ().

Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.

Definición y Uso

drawImage () para dibujar una imagen, vídeo o lona en el lienzo.

Ciertas porciones a drawImage () método también se puede dibujar la imagen, y / o aumentar o disminuir el tamaño de la imagen.

la sintaxis de JavaScript

Posicionamiento de la imagen en el lienzo:

la sintaxis de JavaScript:	contexto .drawImage (img, x, y);

Posicionamiento de la imagen en el lienzo, y una anchura predeterminada y la altura de la imagen:

la sintaxis de JavaScript:	contexto .drawImage (img, x, y, anchura, altura);

Cortar la imagen y localizar la parte cortada sobre lienzo:

la sintaxis de JavaScript:	contexto .drawImage (img, sx, sy, swidth, sheight, x, y, ancho, altura);

parámetro Valor

parámetros	descripción
img	Predeterminada de la imagen, lienzo o vídeo que desea utilizar.
sx	Opcional. Empezar a cortar la coordenada x de la posición.
SY	Opcional. Comience coordenadas y cortadas.
swidth	Opcional. Es el ancho de la imagen de corte.
sheight	Opcional. Altamente cortar imagen.
x	Lugar x posición de la imagen en el lienzo de coordenadas.
y	Coloca las coordenadas Y de la posición de la imagen en el lienzo.
ancho	Opcional. Para utilizar el ancho de la imagen (por el estiramiento o la contracción de la imagen).
altura	Opcional. La altura de la imagen que desea utilizar (estirando o encogiendo la imagen).

más ejemplos

Ejemplos

En el lienzo de la imagen posicionamiento, a continuación, especifique la anchura y la altura de la imagen:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "gritar");
img.onload = function () {
ctx.drawImage (img, 10,10,150,180);
}

Trate »

Ejemplos

Cortar la imagen, y en el lienzo de las porciones cortadas se colocan:

JavaScript:

var c = document.getElementById ( "myCanvas");
var ctx = c.getContext ( "2d");
var img = document.getElementById ( "gritar");
ctx.drawImage (img, 90,130,50,60,10,10,50,60);

Trate »