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 相关文章推荐
jquery validate.js表单验证的基本用法入门
May 13 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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 switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python概率计算器实例分析
2015/03/25 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python单例设计模式实现解析
2020/01/07 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
运动与健康自我评价
2015/03/09 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
教你用python实现12306余票查询
2021/06/30 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python