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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
8个必备的PHP功能开发
2015/10/02 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
使用python实现省市三级菜单效果
2016/01/20 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
一名毕业生的自我鉴定
2013/12/04 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP