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 相关文章推荐
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
js中top的作用深入剖析
Mar 04 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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实现的zip文件内容比较类
2014/09/24 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
Django自定义分页效果
2017/06/27 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python如何读写CSV文件
2020/08/13 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
表决心的诗句大全
2014/03/11 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
2014年班干部工作总结
2014/11/25 职场文书
聘任书格式及范文
2015/09/21 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
SQL 聚合、分组和排序
2021/11/11 MySQL