Dessiner des images
Var image = new image ();
image.src = ”http://img4.duitang.com/uploads/item/201406/25/20140625182321_4mtau.thumb.700_0.jpeg”;
image.onload = function () {}
Context.Drawimage (image, x, y);
Context.Drawimage (image, x, y, w, h);
Context.Drawiamge (Image, Sx, Sy, SW, SH, DX, DY, DW, DH);
Picture Tiling
Var pat = context.CreatePattern (image, "répéter");
Context.fillStyle = pat;
Context.fillrect (0,0,400,300);
Croping d'images
Dessinez d'abord le chemin
Context.clip ();
<Html> <A-the-head> <meta charset = "utf-8"> <title> dessiner des images </ title> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1, minimum-échelle = 1, maximum-scale = 1, user-scalable = no" /> </ead> <body> <canevas id = "canevas"> </ canvas> type = "text / javascript"> var ocanvas = document.getElementById ("canvas"); var context = ocanvas.getContext ("2d"); context.fillStyle = "#eded"; context.fillrect (0, 0, 500, 500); // dessine l'image var img = new image (); // crée img.src = "img / 01.jpg"; // Adresse d'image img.onload = function () {// détecter toutes les informations d'image de chargement Page context.DrawImage (img, 0, 0); // objet img; 0,0: point de départ des coordonnées IMG}; </cript> </ body> </html>