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

javascript this用法小结

Dec 19 Javascript

JavaScript 判断日期格式是否正确的实现代码

Jul 04 Javascript

jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

Dec 02 Javascript

javascript中兼容主流浏览器的动态生成iframe方法

May 05 Javascript

js获取图片宽高的方法

Nov 25 Javascript

Javascript中this绑定的3种方法与比较

Oct 13 Javascript

JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

Dec 12 Javascript

Jquery Easyui选项卡组件Tab使用详解（10）

Dec 18 Javascript

原生JS实现在线问卷调查投票特效

Jan 03 Javascript

bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

Feb 23 Javascript

jquery实现自定义图片裁剪功能【推荐】

Mar 08 Javascript

浅析JS中常用类型转换及运算符表达式

Jul 23 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数据库开发知多少

2006/10/09 PHP

解析PHP可变函数的经典用法

2013/06/20 PHP

Smarty foreach控制循环次数的实现详解

2013/07/03 PHP

PHP中使用break跳出多重循环代码实例

2015/01/21 PHP

php多线程实现方法及用法实例详解

2015/10/26 PHP

[原创]php实现 data url的图片生成与保存

2016/12/04 PHP

PHP实现删除多重数组对象属性并重新赋值的方法

2017/06/07 PHP

php表单习惯用的正则表达式

2017/10/11 PHP

深入理解 PHP7 中全新的 zval 容器和引用计数机制

2018/10/15 PHP

Yii2框架自定义验证规则操作示例

2019/02/08 PHP

JavaScript实现禁止后退的方法

2006/12/27 Javascript

JavaScript中判断函数是new还是()调用的区别说明

2011/04/07 Javascript

jQery使网页在显示器上居中显示适用于任何分辨率

2014/06/09 Javascript

jQuery源码分析之jQuery.fn.each与jQuery.each用法

2015/01/23 Javascript

jquery pagination插件动态分页实例(Bootstrap分页)

2016/12/23 Javascript

微信小程序支付功能开发错误总结

2017/02/21 Javascript

二维码图片生成器QRCode.js简单介绍

2017/08/18 Javascript

详解vue+vuex+koa2开发环境搭建及示例开发

2018/01/22 Javascript

vue print.js打印支持Echarts图表操作

2020/11/13 Javascript

用Python编程实现语音控制电脑

2014/04/01 Python

Python中使用Inotify监控文件实例

2015/02/14 Python

Python调用SQLPlus来操作和解析Oracle数据库的方法

2016/04/09 Python

Python数据分析中Groupby用法之通过字典或Series进行分组的实例

2017/12/08 Python

详解tensorflow载入数据的三种方式

2018/04/24 Python

python之super的使用小结

2018/08/13 Python

Centos下实现安装Python3.6和Python2共存

2018/08/15 Python

python_opencv用线段画封闭矩形的实例

2018/12/05 Python

Python 正则表达式爬虫使用案例解析

2019/09/23 Python

CSS3盒子模型详解

2013/04/24 HTML / CSS

商务考察邀请函范文

2014/01/21 职场文书

自荐书4要点

2014/01/25 职场文书

质量月口号

2014/06/20 职场文书

八荣八耻演讲稿

2014/09/15 职场文书

街道党工委党的群众路线教育实践活动对照检查材料思想汇报

2014/10/05 职场文书

iPhone13将有八大升级

2021/04/15 数码科技

十大冰系宝可梦排名，颜值最高的阿罗拉九尾，第三使用率第一

2022/03/18 日漫