首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js HTML5 canvas绘制图片的方法

Posted in Javascript onSeptember 08, 2017

本文实例为大家分享了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>

图片：

js HTML5 canvas绘制图片的方法

效果：

js HTML5 canvas绘制图片的方法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js HTML5 canvas绘制图片的方法

- Author -

1点

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
javascript常用的方法整理
Aug 20 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 #Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 #Javascript
javascript获取指定区间范围随机数的方法
Sep 08 #Javascript
原生js实现简单的模态框示例
Sep 08 #Javascript
javascript 面向对象实战思想分享
Sep 07 #Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 #Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 #Javascript
事务并发(1) ctypes(1) 经纬度(1) dll(1) 复读(1) MVCC(4) C/C++(1) innoDB(3) 间隙锁(2) 幻读(5)
You might like
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python实现翻转棋游戏（othello）
2019/07/29 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python创建学生管理系统
2019/11/22 Python
Python 实现try重新执行
2019/12/21 Python
python实现坦克大战
2020/04/24 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python三引号如何输入
2020/07/06 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
Pandas替换及部分替换（replace）实现流程详解
2020/10/12 Python
如何开发一款堪比APP的微信小程序（腾讯内部团队分享）
2016/12/22 HTML / CSS
阿波罗盒子：Apollo Box
2017/08/14 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订：e路东瀛
2019/12/09 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
车辆转让协议书
2014/09/24 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang