Dibujar imágenes
Var imagen = nueva imagen ();
image.src = ”http://img4.duitang.com/uploads/item/201406/25/20140625182321_4mtau.thumb.700_0.jpeg";
image.onload = function () {}
Context.drawimage (imagen, x, y);
Context.DrawImage (Image, X, Y, W, H);
Context.drawiamge (Image, SX, Sy, SW, SH, DX, DY, DW, DH);
Mosaico de imágenes
Var pat = context.createPattern (imagen, "repetir");
Context.fillstyle = Pat;
Context.fillrect (0,0,400,300);
Recorte de imágenes
Dibuja el camino primero
Context.clip ();
<html> <fead> <meta charset = "utf-8"> <title> dibujar imágenes </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1, mínimo-escale = 1, maximum-escale = 1, user-scalable = no"/> </head> <body> <canvas Id = "canvas"> <s Canvasvas> <Sitsvas> type = "text/javaScript"> var oCanvas = document.getElementById ("Canvas"); VAR context = ocanvas.getContext ("2d"); context.fillstyle = "#ededed"; context.fillrect (0, 0, 500, 500); // Dibuja la imagen var img = nueva imagen (); // crear img.src = "img/01.jpg"; // Dirección de imagen img.onload = function () {// detectar toda la página de carga de imagen context.drawimage (img, 0, 0); // objeto img; 0,0: Punto de partida de coordenadas IMG}; </script> </body> </html>