HTML5 canvas 9绘制图片实例详解


Posted in Javascript onSeptember 06, 2016

绘制图片

Var image=new Image();

image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”;

image.onload=function(){}

Context.drawImage(image,x,y);

Context.drawImage(image,x,y,w,h);

Context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh);

图片平铺

HTML5 canvas 9绘制图片实例详解

Var pat= context.createPattern(image,”repeat”);

Context.fillStyle=pat;

Context.fillRect(0,0,400,300);

图片裁剪

HTML5 canvas 9绘制图片实例详解

先绘制好路径

 

Context.clip();

<html>

 <head>
 <meta charset="UTF-8">
 <title>绘制图片</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

 </head>

 <body>
 <canvas id="canvas" width="500" height="500"></canvas>
 
 <script type="text/javascript">
  var oCanvas = document.getElementById("canvas");
  var context = oCanvas.getContext("2d");
  context.fillStyle = "#ededed";
  context.fillRect(0, 0, 500, 500);

  //绘制图片
  var img = new Image(); //创建
  img.src = "img/01.jpg"; //图片地址
  img.onload = function() { //检测所有图像信息载入页面里
  context.drawImage(img, 0, 0); // img对象;0,0:img坐标起点
  };
 </script>
 </body>

</html>
Javascript 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 #Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 #Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 #Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 #Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 #Javascript
原生JS:Date对象全面解析
Sep 06 #Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 #Javascript
You might like
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php中上传文件的的解决方案
2018/09/25 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python文件和目录操作详解
2015/02/08 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python协程的用法和例子详解
2017/09/09 Python
django实现用户登陆功能详解
2017/12/11 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python单例模式的多种实现方法
2019/07/26 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
充分就业社区汇报材料
2014/05/07 职场文书
小学家长通知书评语
2014/12/31 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python