[HTML5] Canvas simple image rendering tutorial,

[HTML5] Canvas simple image rendering tutorial,

The following small series will bring you a simple image tutorial for [HTML5] Canvas. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at the small Editor and wish you a pleasant game.

Get the Image object, new

Defines the src attribute of the Image object. Parameter: Image path

Defines the onload method of the Image object, and calls the drawImage () method of the context object. parameters: Image object, x coordinate, and y coordinate

Overload method: Call the drawImage () method of the context object. parameters: Image object, x coordinate, y coordinate, Image width, and height

　　

 

Overload method, call the drawImage () method of the context object,

Parameters:

Image object, x coordinate on the Image, y coordinate on the Image, rectangular width, rectangular height, x coordinate on the canvas, y coordinate on the canvas, Image width, and Image Height

　　

 

Call the getImageData () method of the context object to obtain the pixel color array. parameters: x coordinate, y coordinate, x width, and y width

Call the putImageData () method of the context object to set the image color. parameters: ImageData object, x coordinate, and y coordinate.

　　

Var canvas = document. getElementById ('mycanvas '); 2. var context = canvas. getContext ("2d"); 3. // draw the image 4. var img = new Image (); 5. img. src = "1.jpg"; 6. img. onload = function () {7. // context. drawImage (img, 0, 0); 8. // context. drawImage (img, 0, 0, 100,100); 9. context. drawImage (img, 180,160,100,100, 100,100,); 10. var imagedata = context. getImageData (0, 0, 100,100); 11. for (var I = 0, n = imagedata. data. length; I <n; I + = 4) {12. imagedata. data [I + 0] = 255-imagedata. data [I + 0]; // red; 13. imagedata. data [I + 1] = 255-imagedata. data [I + 1]; // green 14. imagedata. data [I + 2] = 255-imagedata. data [I + 2]; 15 .} 16. context. putImageData (imagedata, 0, 0); 17 .}