编程 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 相关文章推荐

类似框架的js代码

Nov 09 Javascript

JavaScript 空位补零实现代码

Feb 26 Javascript

jquery获取复选框被选中的值

Mar 22 Javascript

jquery实现上下左右滑动的方法

Feb 09 Javascript

代码分析jQuery四种静态方法使用

Jul 23 Javascript

Javascript BOM学习小结(六)

Nov 26 Javascript

基于jquery实现动态竖向柱状条特效

Feb 12 Javascript

jQuery实现TAB选项卡切换特效简单演示

Mar 04 Javascript

AngularJS实现按钮提示与点击变色效果

Sep 07 Javascript

基于 vue-skeleton-webpack-plugin 的骨架屏实战

Aug 05 Javascript

nuxt配置通过指定IP和端口访问的实现

Jan 08 Javascript

JS求解两数之和算法详解

Apr 28 Javascript

WebStorm ES6 语法支持设置&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下HTTP Response中的Chunked编码实现方法

2008/11/19 PHP

PHP中通过加号合并数组的一个简单方法分享

2011/01/27 PHP

PHP session有效期session.gc_maxlifetime

2011/04/20 PHP

让CodeIgniter的ellipsize()支持中文截断的方法

2014/06/12 PHP

PHP实现转盘抽奖算法分享

2020/04/15 PHP

javascript 一个函数对同一元素的多个事件响应

2009/07/25 Javascript

javascript 静态对象和构造函数的使用和公私问题

2010/03/02 Javascript

javascript学习笔记(一) 在html中使用javascript

2012/06/18 Javascript

Javascript查询DBpedia小应用实例学习

2013/03/07 Javascript

jquery获取子节点和父节点的示例代码

2013/09/10 Javascript

JS实现仿苹果底部任务栏菜单效果代码

2015/08/28 Javascript

JavaScript几种数组去掉重复值的方法推荐

2016/04/12 Javascript

整理JavaScript对DOM中各种类型的元素的常用操作

2016/05/05 Javascript

easyui window refresh 刷新两次的解决方法(推荐)

2016/05/18 Javascript

JavaScript实现无刷新上传预览图片功能

2017/08/02 Javascript

VUE实现一个分页组件的示例

2017/09/13 Javascript

Vue2.0 实现歌手列表滚动及右侧快速入口功能

2018/08/08 Javascript

在vue中更换字体,本地存储字体非引用在线字体库的方法

2018/09/28 Javascript

vue实现简单跑马灯效果

2020/05/25 Javascript

[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦

2015/02/01 DOTA

简单的Python抓taobao图片爬虫

2014/10/26 Python

Python实现LRU算法的2种方法

2015/06/24 Python

python实现批量修改文件名代码

2017/09/10 Python

简单实现python画圆功能

2018/01/25 Python

Python调用JavaScript代码的方法

2020/10/27 Python

CSS3 绘制BMW logo实的现代码

2013/04/25 HTML / CSS

Otiumberg官网：英国半精致珠宝品牌

2021/01/16 全球购物

《动手做做看》教学反思

2014/04/09 职场文书

学习之星事迹材料

2014/05/17 职场文书

中职三好学生事迹材料

2014/08/24 职场文书

党的群众路线教育实践活动通讯稿

2014/09/10 职场文书

基层党组织建设整改方案

2014/09/16 职场文书

员工年终考核评语

2014/12/31 职场文书

委托收款证明

2015/06/23 职场文书

Python中X[:,0]和X[:,1]的用法

2021/05/10 Python

自动在Windows中运行Python脚本并定时触发功能实现

2021/09/04 Python