Html5 canvas学习4-图像
来源:互联网 发布:能在淘宝上发布 植树 编辑:程序博客网 时间:2024/06/08 02:37
把图片或视频放置到画布上, 使用以下方法:
ctx.drawImage(image,x,y)//完整的参数如下,除了image,x,y其余均是可选ctx.drawImage( img, clip_x, clip_y, clip_w, clip_h, x, y, width, height );
1.最简单的形式ctx.drawImage(img, x, y):
<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = new Image();img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";img.onload = function(){ ctx.drawImage(img,30,30); //在画布坐标(30,30)的位置绘制图片}</script>
等图片onload之后才执行绘图代码,防止代码在图片加载到之前就执行。
2.width 和 height 参数来缩放图片:
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = new Image();img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";img.onload = function(){ ctx.drawImage(img,30,30,250,150); //在画布坐标(30,30)的位置绘制一张宽度为250,高度为150的图片}
3.裁剪图片
参数 clip_x, clip_y, clip_w, clip_h
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = new Image();img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";img.onload = function(){ ctx.drawImage(img,10,20,300,300,30,30,250,150); //在画布坐标(30,30)的位置绘制一张宽度为250、高度150的图片,这种图片是在img上坐标为(10,20)的位置所裁剪出来的宽高均为300的区域}
注意这里被拉伸的图片已经不再是一开始的那张原始图了,而是原始图在其坐标(10,20)处开始裁剪到的宽高均为300的区域,也就是把这个裁剪到的区域,再伸缩为宽250、高150。
4.clip()方法剪裁
在使用它之前需要绘制一个闭合路径(比如一个rect),使用clip()之后的绘制语句所绘制的对象只能显示被裁剪的区域(就一开始定义的那个闭合路径里的区域,类似PS的蒙板、Flash里的遮罩层):
var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.rect(60,60,100,100); //绘制裁剪区域(一个矩形)ctx.clip(); //设置上一个闭合路径为裁剪蒙板var img = new Image();img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";img.onload = function(){ ctx.drawImage(img,10,20); }
更多canvas图像相关的使用方法,暂时不做介绍待以后补充,用到时可以参考:
http://www.cnblogs.com/vajoy/p/3996979.html
https://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
阅读全文
0 0
- Html5 canvas学习4-图像
- html5学习canvas图像处理
- html5 canvas学习--操作与使用图像
- HTML5 Canvas图像缩放
- HTML5 Canvas 绘制图像
- HTML5标签canvas图像处理
- HTML5 Canvas(画布)图像处理
- HTML5 Canvas 学习
- HTML5 Canvas 学习(1)
- 学习HTML5-Canvas
- html5 canvas 学习笔记
- html5学习笔记 -- canvas
- HTML5学习笔记------Canvas
- html5学习canvas
- html5 canvas 学习笔记
- HTML5学习之-Canvas
- html5--canvas学习
- HTML5 组件Canvas实现图像灰度化
- zeromq:c,c++,golang及nodejs使用
- pycharm之PEP8编码风格
- [模板] 单源最短路径
- tp5异步上传图片到七牛云,就是那么简单
- Maven学习笔记(二)——Maven目录结构、pom.xml解析&基础命令(一)
- Html5 canvas学习4-图像
- 斯坦财经 GVE基金会亮相北京中关村出席区块链前沿技术论坛
- C语言学习_分离个十百位
- rabbitmq, windows/linux, c/c++/node.js/golang/dotnet
- 仿京东商品详情页(配合购物车使用)
- ACE proactor example
- Maven学习笔记(三)——Maven仓库(Repositories)、基础命令(二)&自动构建项目
- 算法——贪心法
- etcd-v2第一集