This time I will bring you a JS H5 canvas drawing picture tutorial, what are the precautions for drawing pictures on JS H5 canvas, the following is a practical case, let’s take a look one time.
demo.js
window.onload=function() {
createcanvas();
drawImage();
}
function createcanvas() {
var CANVAS=document.getElementById('mycanvas');
context=CANVAS.getContext('2d');
}
function drawImage() {
var img=new Image();
img.onload=function() {
context.drawImage(img,0,0,200,200 );
}
img.src="img5.jpg";
}demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="demo.js"></script> </head> <body> <canvas id="mycanvas" width="400" hight="400" > <span>你的浏览器不支持canvas</span> </canvas> </body> </html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
JS converts the list into a tree structure
JS enables pictures to be dragged on the web page
How long is the life cycle of React Native components
The above is the detailed content of JS+H5+canvas drawing picture tutorial. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
