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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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语言认识上需要避免的10大误区
2014/06/12 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Django 路由系统URLconf的使用
2018/10/11 Python
keras中的History对象用法
2020/06/19 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers