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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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 foreach、while性能比较
2009/10/15 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
17个Python小技巧分享
2015/01/23 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python解析xml简单示例
2019/06/21 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
python plotly画柱状图代码实例
2019/12/13 Python
利用python实现汉诺塔游戏
2021/03/01 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Python使用openpyxl模块处理Excel文件
2022/06/05 Python