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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
js 学习笔记(三)
Dec 29 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
js实现验证码干扰(动态)
Feb 23 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批量删除数据
2007/01/18 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
语义化 H1 标签
2008/01/14 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
vue脚手架搭建过程图解
2018/06/06 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
python Django批量导入数据
2016/03/25 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python tkinter窗口最大化的实现
2019/07/15 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
歌唱比赛主持词
2014/03/18 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
话题作文之成长
2019/12/09 职场文书
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS