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 对象的定义方法
Jan 10 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
JS中的事件委托实例浅析
Mar 22 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
销售求职信范文
2014/05/26 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
党员剖析材料范文
2014/09/30 职场文书
今日说法观后感
2015/06/08 职场文书