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

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

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

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

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

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

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

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

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

												


											
HTML canvas图像裁剪的更多相关文章
	

    
								
  1. 【开源】canvas图像裁剪、压缩、旋转
		
    前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...
    
		
    2. 
						
  2. canvas图像裁剪、压缩、旋转
		
    转载于:http://www.cnblogs.com/dailc/p/7843204.html 前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求.考虑到已有各轮子的契合度都不高,于是自己 ...
    
		
    3. 
						
  3. PHP图像裁剪为任意大小的图像，图像不变形，不留下空白
		
    <?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...
    
		
    4. 
						
  4. 【HTML5】Canvas图像
		
    把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象.   显示一个canvas图像: <!DOCTYPE html> &l ...
    
		
    5. 
						
  5. php 图像裁剪(自定义裁剪图片大小)
		
    <?php /** * 图像裁剪 * @param $title string 原图路径 * @param $content string 需要裁剪的宽 * @param $encode str ...
    
		
    6. 
						
  6. canvas图像保存
		
    很多时候绘制完成的图片需要保存,那么我们就可以使用到Canvas API来完成这最后一步! Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载,然后我们 ...
    
		
    7. 
						
  7. jQuery Jcrop 图像裁剪
		
    jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...
    
		
    8. 
						
  8. mui---调用图像裁剪android
		
    mui调用图像裁剪android: var IMAGE_UNSPECIFIED = "image/*"; //相册显示的文件类型 var PHOTOZOOM = 2; // 获取完 ...
    
		
    9. 
						
  9. 如何实现Canvas图像的拖拽、点击等操作
		
    上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux操作系统学习_用户态与内核态之切换过程
			
    因为操作系统的很多操作会消耗系统的物理资源,例如创建一个新进程时,要做很多底层的细致工作,如分配物理内存,从父进程拷贝相关信息,拷贝设置页目录.页表等,这些操作显然不能随便让任何程序都可以做,于是就产 ...
    
			
    2. 
						
  2. 反向代理（Reverse Proxy）
			
    反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时 ...
    
			
    3. 
						
  3. TCMalloc小记
			
    周末抽空看了一下tcmalloc,了解了个大概.下面记录一下. 一. 原理 tcmalloc就是一个内存分配器,管理堆内存,主要影响malloc和free,用于降低频繁分配.释放内存造成的性能损耗,并 ...
    
			
    4. 
						
  4. 基于Log4net插件
			
    基本代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using log ...
    
			
    5. 
						
  5. Warensoft Stock Service Api客户端接口说明
			
    Warensoft Stock Service Api客户端接口说明 Warensoft Stock Service Api Client Reference 可使用环境(Available Envi ...
    
			
    6. 
						
  6. .NET基础——基本概念
			
    1.   .NET.C#(sharp)和JAVA .net是一种多语言的平台,开发.net可以用多达几十种语言进行开发. C#(sharp)是一种编程语言,可开发基于.net平台的应用. Java既是 ...
    
			
    7. 
						
  7. 基于AFNetworking 3.0的取消已发出的网络请求
			
    一般情况下主动取消请求的需求不会太多 除非以下几种情况 1.比如电商应用为例 请求频繁,数据量大 2.对性能的要求比较高 3.网络环境比较差 当一个用户打开一个界面 看到的却是漫长的等待框 这时候用户 ...
    
			
    8. 
						
  8. [Q]手动加载菜单方法
			
    一般情况下,安装程序会自动安装依云软件菜单,但可能由于某些原因未能自动安装的话,您可以手动加载菜单,步骤如下: 在AoutCAD命令行输入"CUILOAD",会弹出"加载 ...
    
			
    9. 
						
  9. strstr库函数实现
			
    #include<stdio.h> #include<assert.h> char *strstr(char* src,char *sub) { if(src==NULL||N ...
    
			
    10. 
						
  10. Texture的渲染及截屏功能
			
    我们今天就简单说下 cocos2d的Texture的简单用法,并将一张大图裁剪成小图并保存起来 我们先准备一张大图,如下: 只看图,表太在意内容啊. 我们的目的就是将这张大图裁剪成一张张的小图并保存下 ...
    
			
    11.