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

js HTML5 canvas绘制图片的方法

不言
发布： 2018-06-05 15:20:35
原创
2036 人浏览过

这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了HTML5 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>
登录后复制

图片：

效果：

相关推荐：

HTML5 canvas基本绘图之绘制线条

js获取html的span标签的值方法(超简单)

以上是js HTML5 canvas绘制图片的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
canvas html5
来源：php.cn
上一篇：JS实现加载时锁定HTML页面元素的方法 下一篇：HTML中使背景图片自适应浏览器大小
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何使用Javascript设置HTML5的required属性？ 我正在尝试在Javascript中将text输入框标记为必需。<inputid="edName"type="text"id="...
来自于 2023-10-13 08:52:25
0
2
317
无法获取鼠标准确坐标的问题：在调整页面大小时使用HTML5画布 我想从前端专家那里创建这个像素效果。虽然我能够在全屏画布上实现整个像素效果：constcanvas=getElementById('canvas');canvas.height=w...
来自于 2023-09-12 12:20:33
0
1
280
使用Base64编码的HTML5视频M3U8 我想在HTML5的Video标签中添加一个base64编码的M3U8文件，我该怎么做<!DOCTYPEhtml><htmllang="en"&...
来自于 2023-09-09 23:07:18
0
1
247
vue.js / bootstrap：未调用 onclick 事件方法，错误'找不到变量：updateDocument” 我是前端开发新手，但对HTML5、CSS和Javascript有基本了解。我创建了一个vue.js项目并添加了bootstrap和axios。我的应用程序加载数据并显示它们。但是，...
来自于 2023-09-09 20:06:48
0
1
362
XHTML中移除图像标签中的闭合斜杠'/' 我有一个存储图像的字符串txt1。它的值是XHTML格式，即元素已关闭：。但我需要删除该关闭斜杠，因此它可以是就像HTML5中一样。有没有办法做到这一点。
来自于 2023-09-06 12:15:38
0
1
240
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！