首页 > web前端 > js教程 > JS+H5+canvas绘制图片教程

JS+H5+canvas绘制图片教程

php中世界最好的语言
发布: 2018-04-18 11:44:15
原创
1206 人浏览过

这次给大家带来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>
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS把list转换成树状结构

JS实现图片在网页中被拖拽

React Native组件的生命周期多长

以上是JS+H5+canvas绘制图片教程的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板