This article introduces simple picture operations. The first is simple picture display.
The effect is as follows:
jpg format picture on the web page. It is also very simple to implement. The code is as follows:
var image = new Image();
image.src = "icon.jpg";
image.onload = function(){
context.drawImage(image,50,50);
}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:
context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
context.closePath();
context.stroke();
var dataURL = canvas.toDataURL();
//document.write(dataURL);
var output = new Image();
output.src = dataURL;
output.onload = function(){
context.drawImage(output,20,150);
}After
stroke, we pass canvas The ##toDataURL function exports what we drew before as a data url, and the format is as follows:There are many more behind. In short, we turned them into a picture, which we can export and display through these few sentences. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+8AAAKlCAYAAAC6zt2bAAAgAElEQVR4Xu3dfcj2d1kG8.....
Copy after login
var output = new Image();
output.src = dataURL;
output.onload = function(){
context.drawImage(output,20,150);
}
What are the production methods of html5 animation production?
The difference between HTML and HTML5
How to solve too many logins
windows cannot open add printer
what is c#
Solution to the problem that setting the Chinese interface of vscode does not take effect
How to cut long pictures on Huawei mobile phones
How to format hard drive in linux
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
