码迷,mamicode.com
首页 > Web开发 > 详细

HTML canvas图像裁剪

时间:2017-01-12 09:09:26      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:str   img   位置   宽度   height   开始   如何   未使用   遇见   

canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅!

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

这句话的执行过程可以这么理解:

  首先是绘制一幅图像,这幅图像的宽和高就是图像实际的宽和高!

  然后开始裁剪,sx   sy是裁剪的起始位置,swidth和sheight是裁剪的高度和宽度,注意限制一下最大值,不要超出图片的高度和宽度;

  这样图片就裁剪好了,然后就是放到画布上。如何放置,请继续看下去... ...

  后四个参数,实际上是在画布中开辟一个区域,用于放置裁剪下来的图像!

  正常来说应该图像应该是充满整个区域的,奇葩的是偶尔会遇见图像不充满的情况,理解如下:

    仅仅是一个区域,并不代表图像的实际大小,如果图像小,可能会有一部分空白(即未使用),如果大,则不会超出去!





HTML canvas图像裁剪

标签:str   img   位置   宽度   height   开始   如何   未使用   遇见   

原文地址:http://www.cnblogs.com/tengpan-cn/p/6274497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!