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绘制图片的方法

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

Javascript 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
ES7之Async/await的使用详解
Mar 28 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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
You might like
php实现ping
2006/10/09 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
php eval函数用法总结
2012/10/31 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python自动发微信监控报警
2019/09/06 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
高二物理教学反思
2014/02/08 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
食品安全工作方案
2014/05/07 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫