这次给大家带来js+h5+canvas绘制图片教程，js+h5+canvas绘制图片的注意事项有哪些，下面就是实战案例，一起来看一下。
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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js把list转换成树状结构
js实现图片在网页中被拖拽
react native组件的生命周期多长
以上就是js+h5+canvas绘制图片教程的详细内容。