首页
所有分类
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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
再论Javascript的类继承
Mar 05 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
Android Studio(4) tfx(1) OpenGL(1) exec(1) cv2(1) 面向接口(1) OpenAI baselines(1) MyBatis(5) BeautifulSoup4(2) Flask Web(1)
You might like
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
laravel框架使用FormRequest进行表单验证，验证异常返回JSON操作示例
2020/02/18 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
JavaScript碎片—函数闭包（模拟面向对象）
2019/03/13 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python list转置和前后反转的例子
2019/08/26 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python datetime处理时间小结
2020/04/16 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
澳大利亚旅游网站：Lastminute
2017/08/07 全球购物
在线购买世界上最好的酒：BoozeBud
2018/06/07 全球购物
微软巴西官方网站：Microsoft Brasil
2019/09/26 全球购物
计算机求职信
2013/12/01 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
高中军训感言600字
2014/03/11 职场文书
推荐信格式范文
2014/05/09 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
学校与家长安全责任书
2014/07/23 职场文书
公务员培的训心得体会
2014/09/01 职场文书
员工家属慰问信
2015/03/24 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python