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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
JavaScript的词法结构精华篇
Oct 17 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python格式化css文件的方法
2015/03/10 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
python属于解释语言吗
2020/06/11 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
中青班党性分析材料
2014/02/16 职场文书
黄石寨导游词
2015/02/05 职场文书
盗窃案辩护词
2015/05/21 职场文书
退伍军人感言
2015/08/01 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
JS Canvas接口和动画效果大全
2021/04/29 Javascript
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android
Golang gRPC HTTP协议转换示例
2022/06/16 Golang
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python