[HTML5] Canvas simple image rendering tutorial,

[HTML5] Canvas simple image rendering tutorial,

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.

 

Copy the content to the clipboard using JavaScript Code

1. Var canvas = document. getElementById ('mycanvas ');
2. Var context = canvas. getContext ("2d ");
3. // Draw an 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, 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. }

The above [HTML5] Canvas simple image rendering tutorial is a small series to share with you all the content, I hope to give you a reference, but also hope you can support a lot of help home.