This article introduces simple picture operations. The first is simple picture display.
The effect is as follows:

##It is to display a simple
jpg format picture on the web page. It is also very simple to implement. The code is as follows:
1 2 3 4 5 | var image = new Image();
image.src = "icon.jpg" ;
image.onload = function (){
context.drawImage(image,50,50);
}
|
Copy after login
First create a
Image object, and then set the image object’s src property to the relative path of the image, and finally , override the onload method to display it once the image is loaded.
The following introduces how to export the graphics we drew into pictures. The effect is as follows:

# #In fact, there is nothing special about the effect. Let’s mainly look at the code. The code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 | context.beginPath();
context.moveTo(50,200);
context.bezierCurveTo(100,100,150,300,200,200);
context.closePath();
context.stroke();
var dataURL = canvas.toDataURL();
var output = new Image();
output.src = dataURL;
output.onload = function (){
context.drawImage(output,20,150);
}
|
Copy after login
After
stroke
, we pass canvas The ##toDataURL function exports what we drew before as a data url, and the format is as follows:
1 | data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+8AAAKlCAYAAAC6zt2bAAAgAElEQVR4Xu3dfcj2d1kG8.....
|
Copy after login
There are many more behind. In short, we turned them into a picture, which we can export and display through these few sentences.
1 2 3 4 5 | var output = new Image();
output.src = dataURL;
output.onload = function (){
context.drawImage(output,20,150);
}
|
Copy after login
The above is the content of Html5 Canvas preliminary study notes (11) - simple image operations. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!