简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

JS+H5+canvas绘制图片教程

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

这次给大家带来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中文网其他相关文章！

相关标签：
html5 javascript
来源：php.cn
上一篇：js匿名函数传参方法 下一篇：WebStorm ES6怎么使用babel
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
javascript - H5页面怎么查看console信息？ 平常习惯于用console调试js，而且手机端alert老是不让弹，调试H5页面时，手机端怎么查看console的信息呢？
来自于 2017-06-30 09:54:59
0
5
763
javascript - APP如何判断内嵌H5页面崩溃 如果内嵌H5页面崩溃了，h5内响应的JS也是不能执行的，无法给app一个反馈让APP重新刷新。有什么好的解决方案嘛
来自于 2017-06-29 10:09:39
0
1
680
javascript - 微信小程序里怎么把页面转成图片分享 你好，我们现在在做一个名片的小程序，请问小程序里怎么把一个页面转为图片，有这种js接口吗？谢谢，我尝试过使用canvas，但小程序无法获取dom。。
来自于 2017-06-28 09:28:42
0
3
2776
javascript - 怎么通过Html5或者原声js实现图片在线裁剪成圆角矩形？ h5或者js有什么方法可以实现图片在网页进行裁剪，然后可以剪成圆角的吗？目前我只看到有裁剪成长方形的，不知道能不能实现剪成圆角的.png透明图
来自于 2017-06-08 11:03:09
0
2
511
javascript - 如何使用nodejs 将.html 文件转化成canvas 1.有个页面需要转换成canvas，页面中的部分内容是JS生成的，现在需要使用nodejs将这个页面将这个页面转化成图片。这个功能怎么实现呢？
来自于 2017-06-06 09:52:47
0
1
348
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！