canvas所提供的各种方法根据功能来看大致可以分为几类：
第一是以drawxxx为主的绘制方法；
第二是以clipxxx为主的裁剪方法；
第三是以scale、skew、translate和rotate组成的canvas变换方法；
最后一类则是以savexxx和restorexxx构成的画布锁定和还原；
还有一些其他的就不归类了。
如果用到的不能硬件加速的方法，请务必关闭硬件加速，否则可能会产生不正确的效果。
一、cliprect(…)
cliprect是将当前画布裁剪为一个矩形，以后画的图像仅仅只能在画在这块矩形区域中，超出的部分完全看不到的。可以说裁剪后的区域是我们以后画图的画布，而原来的画布已经不存在了。
下面的代码在画布没裁剪的时候绘制了蓝色，裁剪后绘制了红色。可见裁剪后的画布就仅剩下红色区域了。
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
canvas.drawcolor(color.blue);
canvas.cliprect(, , , );
canvas.drawcolor(color.red);
}
上面我们用到了：
cliprect(int left, int top, int right, int bottom)
相似的还有：
cliprect(float left, float top, float right, float bottom)
一个int一个float。除此之外还有两个与之对应的方法，传入rect或rectf即可。
cliprect(rect rect)
cliprect(rectf rect)
rect和rectf是类似的，只不过rectf中涉及计算的时候数值类型均为float型，两者均表示一块规则矩形。
二、用rect实现多区域裁剪
2.1 intersect
先来看一段代码：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
canvas.drawcolor(color.blue); rect rect = new rect(, , , ); rect.intersect(, , , ); canvas.cliprect(rect);
canvas.drawcolor(color.red);
}
结果：
ps：黄色线框为后期加上的辅助线非程序生成
其实intersect的作用跟我们之前学到的图形混合模式有点类似，它会取两个区域的相交区域作为最终区域，上面我们的第一个区域是在实例化rect时确定的(0, 0, 500, 500)，第二个区域是调用intersect方法时指定的(250, 250, 750, 750)，这两个区域对应上图的两个黄色线框，两者相交的地方则为最终的红色区域。
它的计算方法是，先得到左上方块区域的右下角坐标，再得到下方方框的左上角坐标，两个点，四个坐标构成一个新的rect，然后再进行裁剪。
2.2 union
union方法与intersect相反，取的是相交区域最远的左上端点作为新区域的左上端点，而取最远的右下端点作为新区域的右下端点，比如：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
canvas.drawcolor(color.blue); rect rect = new rect(, , , ); rect.union(, , , ); canvas.cliprect(rect);
canvas.drawcolor(color.red);
}
计算方式：先得到左上矩阵的左上角，再得到下方矩阵的右下角，两个点，四个坐标构成一个新的rect。
三、clippath(path path)
我们可以利用该方法从canvas中“挖”取一块不规则的画布：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
mpaint.setcolor(color.red);
mpaint.setstyle(paint.style.stroke); // 实例化路径
mpath = new path();
// 移动起点至[50,50]
mpath.moveto(50, 50);
mpath.lineto(75, 23);
mpath.lineto(150, 100);
mpath.lineto(80, 110);
// 闭合路径
mpath.close(); // 在原始画布上绘制蓝色
canvas.drawcolor(color.blue);
// 按照路径进行裁剪
canvas.clippath(mpath);
// 在裁剪后剩余的画布上绘制红色
canvas.drawcolor(color.red);
}
四、region.op
4.1 引入
回顾canvas中有关裁剪的方法，你会发现有一大堆带有region.op参数的重载方法：
clippath(path path, region.op op)
cliprect(rect rect, region.op op)
cliprect(rectf rect, region.op op)
cliprect(float left, float top, float right, float bottom, region.op op)
clipregion(region region, region.op op)
要明白这些方法的region.op参数那么首先要了解region为何物。region的意思是“区域”，在android里呢它同样表示的是一块封闭的区域，region中的方法都非常的简单，我们重点来瞧瞧region.op，op是region的一个枚举类，里面呢有六个枚举常量：
那么region.op其实就是个组合模式。
4.2 用代码进行测试
我这里给出一个代码框架，大家可以自行替换粗体文字来看效果。记得关闭硬件加速哦~
public class canvasview extends view {
private region mregiona, mregionb;// 区域a和区域b对象
private paint mpaint;// 绘制边框的paint
public canvasview(context context, attributeset attrs) {
super(context, attrs);
// 实例化画笔并设置属性
mpaint = new paint(paint.anti_alias_flag | paint.dither_flag);
mpaint.setstyle(paint.style.stroke);
mpaint.setcolor(color.white);
mpaint.setstrokewidth(2);
// 实例化区域a和区域b
mregiona = new region(100, 100, 300, 300);
mregionb = new region(200, 200, 400, 400);
}
@override
protected void ondraw(canvas canvas) {
// 填充颜色
canvas.drawcolor(color.blue);
canvas.save();
// 裁剪区域a
canvas.clipregion(mregiona);
// 再通过组合方式裁剪区域b
canvas.clipregion(mregionb, region.op.difference);
// 填充颜色
canvas.drawcolor(color.red);
canvas.restore();
// 绘制框框帮助我们观察
canvas.drawrect(100, 100, 300, 300, mpaint);
canvas.drawrect(200, 200, 400, 400, mpaint);
}
}
以下是各种组合模式的效果：
difference
最终区域为第一个区域与第二个区域不同的区域。
intersect
最终区域为第一个区域与第二个区域相交的区域。
replace
最终区域为第二个区域。
reverse_difference
最终区域为第二个区域与第一个区域不同的区域。
union
最终区域为第一个区域加第二个区域。
xor
最终区域为第一个区域加第二个区域并减去两者相交的区域。
4.3 region
上面用的是region进行演示的，其余的rect什么的自己去试试，都是一样的。
有些童鞋会问那么region和rect有什么区别呢？首先最重要的一点，region表示的是一个区域，而rect表示的是一个矩形，这是最根本的区别之一。其次，region有个很特别的地方是它不受canvas的变换影响，canvas的local不会直接影响到region自身。
我们来看一个simple你就会明白：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
// 因为用到了clipregion，所以要关闭硬件加速
setlayertype(view.layer_type_software, null); // 设置画笔
mpaint.setstyle(paint.style.stroke);
mpaint.setcolor(color.green);
mpaint.setstrokewidth(10); // 实例化矩形对象
rect rect = new rect(0, 0, 200, 200); // 实例化区域对象
region region = new region(200, 200, 400, 400); canvas.save(); // 裁剪矩形
canvas.cliprect(rect);
canvas.drawcolor(color.red); canvas.restore(); canvas.save(); // 裁剪区域
canvas.clipregion(region);
canvas.drawcolor(color.blue); canvas.restore(); // 为画布绘制一个边框便于观察
canvas.drawrect(0, 0, canvas.getwidth(), canvas.getheight(), mpaint);
}
效果图中很清楚的表示了画布当前是和屏幕一样大小的，rect区域是红色的，region区域是蓝色的，两个矩形一样大。当我们按比例缩小画布，来看看会发生什么改变呢？
// 缩放画布
canvas.scale(0.75f, 0.75f);
完整代码：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
// 因为用到了clipregion，所以要关闭硬件加速
setlayertype(view.layer_type_software, null); // 缩放画布
canvas.scale(0.75f, 0.75f); // 设置画笔
mpaint.setstyle(paint.style.stroke);
mpaint.setcolor(color.green);
mpaint.setstrokewidth(10); // 实例化矩形对象
rect rect = new rect(0, 0, 200, 200); // 实例化区域对象
region region = new region(200, 200, 400, 400); canvas.save(); // 裁剪矩形
canvas.cliprect(rect);
canvas.drawcolor(color.red); canvas.restore(); canvas.save(); // 裁剪区域
canvas.clipregion(region);
canvas.drawcolor(color.blue); canvas.restore(); // 为画布绘制一个边框便于观察
canvas.drawrect(0, 0, canvas.getwidth(), canvas.getheight(), mpaint);
}
画布缩小后，矩形区域也跟着缩小了，但是region却没有缩小，这就表示region不会随着画布的缩放而改变。
五、savexxx和restorexxx
5.1 引入“层”的概念
savexxx和restorexxx这两个方法一个是保存画布，一个是释放画布。其实满抽象的，下面我给出一段代码：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); mpaint.setcolor(color.red);
canvas.drawrect(, , , , mpaint); // 保存画布
canvas.save(); mpaint.setcolor(color.blue);
canvas.drawrect(, , , , mpaint); // 还原画布
canvas.restore(); mpaint.setcolor(color.green);
canvas.drawcircle(, , , mpaint);
}
这段代码中先绘制了一个一个红色矩形，然后保存了画布，再绘制一个蓝色矩形，接着释放画布，最后绘制了绿色的圆。简单来说就是画了矩形，矩形，圆形。而save()和restore()区域内的代码你可以简单理解为一个ps图层。
当然上面仅仅是简单的类比，android的绘制机制和ps的有一些本质差异，ps中各种图层都是在画板上的，你可以调整上下顺序；而android中是用栈来处理的，而且一旦你调用了drawxxx方法，图像就被绘制到屏幕上了，你再想改变就不可能了。也就是说drawxxx是一个提交操作，类似于ps中的保存，你做图的时候可以各种设置，一旦你保存了某一个图层，那么就没办法再改了。
5.2 用代码来解释“层”
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint);// 保存画布
canvas.save(); mpaint.setcolor(color.blue);
canvas.drawrect(100, 100, 200, 200, mpaint); // 还原画布
canvas.restore(); mpaint.setcolor(color.green);
canvas.drawcircle(150, 150, 40, mpaint);
}
代码很简单，直接上截图：
这里你看不到任何有关于层的特性，只看到了先画的图形会被放在最下面，后画出的图像会叠放在上层。那么我们修改一下代码加上一个旋转的效果，看看会如何。
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint); // 保存画布
canvas.save();
// 旋转画布
canvas.rotate(30); mpaint.setcolor(color.blue);
canvas.drawrect(100, 100, 200, 200, mpaint); // 还原画布
canvas.restore(); mpaint.setcolor(color.green);
canvas.drawcircle(150, 150, 40, mpaint);
}
我们在save()后添加了旋转，绘制后释放了画布。你会发现旋转的只有蓝色的矩形，之后绘制的绿色圆形没有旋转。这就说明蓝色的矩形被我们放在了一个新的层上，在那里进行的操作是不会影响到之后的图层的。一旦你释放了画布，之后的操作就在别的层上了，所以我们的绿色圆形没有发生任何变化。
至此结合上一节对canvas的一些原理阐述我们该对它有个全新的认识，之前我们一直称其为画布，其实更准确地说canvas是一个容器，如果把canvas理解成画板，那么我们的“层”就像张张夹在画板上的透明的纸，而这些纸对应到android则是一个个封装在canvas中的bitmap。
六、savelayerxxx
6.1 save()和savelayer(…)
除了save()方法canvas还给我们提供了一系列的savelayerxxx方法给我们保存画布，与save()方法不同的是，savelayerxxx方法会将所有的操作存到一个新的bitmap中而不影响当前canvas的bitmap，而save()方法则是在当前的bitmap中进行操作，并且只能针对bitmap的形变和裁剪进行操作，savelayerxxx方法则无所不能，当然两者还有很多的不同，我们稍作讲解。虽然save和savelayerxxx方法有着很大的区别但是在一般应用上两者能实现的功能是差不多，我们可以用代码来进比较：
save()
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint); // 保存画布
canvas.save();
// 旋转画布
canvas.rotate(30); mpaint.setcolor(color.blue);
canvas.drawrect(100, 100, 200, 200, mpaint); // 还原画布
canvas.restore(); mpaint.setcolor(color.green);
canvas.drawcircle(150, 150, 40, mpaint);
}
savelayer(…)
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint); // 保存画布
canvas.savelayer(0, 0, 250, 250, null, canvas.all_save_flag);
// 旋转画布
canvas.rotate(30); mpaint.setcolor(color.blue);
canvas.drawrect(100, 100, 200, 200, mpaint); // 还原画布
canvas.restore(); mpaint.setcolor(color.green);
canvas.drawcircle(150, 150, 40, mpaint);
}
其实二者的效果是一样的，但为什么我们的蓝色矩形的一个角不见了呢？这是因为savelayer保存的是一个区域，而这个区域小于蓝色矩形显示的区域，所以就进行了裁切。类比于ps，ps中的每个图层的大小都是等于图片大小的，但是这里我们可以单独设置每个层的大小。下面我们来引入savelayer保存图层的原理。
savelayerxxx方法会将操作保存到一个新的bitmap中，而这个bitmap的大小取决于我们传入的参数大小，bitmap是个相当危险的对象，很多朋友在操作bitmap时不太理解其原理经常导致oom，在savelayer时我们会依据传入的参数获取一个相同大小的bitmap，虽然这个bitmap是空的但是其会占用一定的内存空间，我们希望尽可能小地保存该保存的区域，而savelayer则提供了这样的功能，顺带提一下，ondraw方法传入的canvas对象的bitmap在android没引入hw之前理论上是无限大的，实际上其依然是根据你的图像来不断计算的，而在引入hw之后，该bitmap受到限制，具体多大大家可以尝试画一个超长的path运行下，你就可以在logcat中看到warning。
6.2 savelayeralpha（…）
除了savelayer，canvas还提供了一个savelayeralpha方法，顾名思义，该方法可以在我们保存画布时设置画布的透明度：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint); // 保存画布
canvas.savelayeralpha(0, 0, 250, 250, 100, canvas.all_save_flag);
// 旋转画布
canvas.rotate(30); mpaint.setcolor(color.blue);
canvas.drawrect(100, 100, 200, 200, mpaint); // 还原画布
canvas.restore(); mpaint.setcolor(color.green);
canvas.drawcircle(150, 150, 40, mpaint);
}
6.3 flag的值
我们在用savelayeralpha和savelayer方法时都用到了一个flag值canvas.all_save_flag，还有别的常量值可以使用么？我们还发现
save (int saveflags)
也需要传入一个flag，这个flag是什么呢？
这六个常量值分别标识了我们在调用restore方法后还原什么。
六个标识位除了clip_save_flag、matrix_save_flag和all_save_flag是save和savelayerxxx方法都通用外，其余三个只能使savelayerxxx方法有效。也就是说
clip_save_flag
matrix_save_flag
all_save_flag
可以被save(int flag)和savelayerxxx(…，int flag)使用，其余的仅仅适用于savelayerxxx方法。
all_save_flag 很简单也是我们新手级常用的标识保存所有；
clip_save_flag 是裁剪标识位；
matrix_save_flag 是变换的标识位；
clip_to_layer_save_flag、full_color_layer_save_flag和has_alpha_layer_save_flag只对savelayer和savelayeralpha有效。
clip_to_layer_save_flag 表示对当前图层执行裁剪操作需要对齐图层边界；
full_color_layer_save_flag 表示当前图层的色彩模式至少需要是8位色，
has_alpha_layer_save_flag 表示在当前图层中将需要使用逐像素alpha混合模式，关于色彩深度和alpha混合大家可以参考维基百科
平时使用大家可以直接all_save_flag就行，感兴趣的可以了解下别的标志位的作用。
七、restoretocount(int savecount)
所有的save、savelayer和savelayeralpha方法都有一个int型的返回值，该返回值作为一个标识给与了一个你当前保存操作的唯一id编号，我们可以利用restoretocount(int savecount)方法来指定在还原的时候还原哪一个保存操作。
7.1 restoretocount和save
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); // 保存画布，并且得到id01
int saveid1 = canvas.save(canvas.matrix_save_flag);
// 旋转画布
canvas.rotate(30);
// 画红色的矩形
mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint); // 建立新的层，得到id02
int saveid2 = canvas.save(canvas.matrix_save_flag);
// 画蓝色的矩形
mpaint.setcolor(color.blue);
canvas.drawrect(100, 100, 200, 200, mpaint); // 还原画布01
canvas.restoretocount(saveid1); // 画绿色圆形
mpaint.setcolor(color.green);
canvas.drawcircle(150, 150, 40, mpaint); }
上面的效果可以告诉我们，虽然我们在绘制蓝色矩形前新建了一个图层，但蓝色矩形还是随着红色矩形旋转了。而我们调用canvas.restoretocount(saveid1)后绘制的绿色圆形却出现了正常的位置上，没有进行旋转。
下面我们用栈来解释一下：
前面我们曾说过save和savelayerxxx方法有着本质的区别，savelayerxxx方法会将所有操作在一个新的bitmap中进行，而save则是依靠stack栈来进行。
canvas会默认保存一个底层的空间给我们绘制一些东西，当我们没有调用save方法时所有的绘图操作都在这个default stack id中进行，每当我们调用一次save就会往stack中存入一个id，将其后所有的操作都在这个id所指向的空间进行直到我们调用restore方法还原操作，上面代码我们save了2次且仅仅restore了id1，所以我们之后绘制的绿色圆形是在id2的栈中，而蓝色的矩形还是在id1的栈中。
当我们调用canvas.restore()后标志着上一个save操作的结束或者说回滚了，下面我们整理下代码来看看不同的效果：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); // 保存画布，并且得到id01
int saveid1 = canvas.save(canvas.matrix_save_flag);
// 旋转画布
canvas.rotate(30);
// 画红色的矩形
mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint); // 还原画布01
canvas.restoretocount(saveid1); // 建立新的层，得到id02
int saveid2 = canvas.save(canvas.matrix_save_flag); // 画蓝色的矩形
mpaint.setcolor(color.blue);
canvas.drawrect(100, 100, 200, 200, mpaint); // 还原画布02
canvas.restoretocount(saveid2); // 画绿色圆形
mpaint.setcolor(color.green);
canvas.drawcircle(150, 150, 40, mpaint); }
可以明显的发现蓝色矩形这时候和红色矩形处于不同的层上了，没有随着红色矩形进行旋转。
7.2 getsavecount()
前面说了，每当我们调用restore还原canvas，对应的save栈空间就会从stack中弹出去，canvas提供了getsavecount()方法来为我们提供查询当前栈中有多少save的空间。这个方法没啥可说的，上代码：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); system.out.println(canvas.getsavecount()); // 保存画布，并且得到id01
int saveid1 = canvas.save(canvas.matrix_save_flag);
system.out.println(canvas.getsavecount());
// 旋转画布
canvas.rotate(30);
// 画红色的矩形
mpaint.setcolor(color.red);
canvas.drawrect(50, 50, 250, 250, mpaint); // 还原画布01
canvas.restoretocount(saveid1);
八、变换
说起变换，无非就几种：平移、旋转、缩放和错切，而我们的canvas也继承了变换的精髓，同样提供了这几种相应的方法，像translate(float dx, float dy)方法平移画布用了无数次，这里再次强调，translate方法会改变画布的原点坐标，原点坐标对变换的影响弥足轻重！
8.1 scale(float sx, float sy)
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); bitmap bitmap = bitmapfactory.decoderesource(mcontext.getresources(), r.drawable.kale);
// 缩放比率为1时表示不缩放
canvas.scale(1.0f, 1.0f);
canvas.drawbitmap(bitmap, 0, 0, null);
}
上面的缩放比为1，也就是不做任何改变。我们来改动下缩放比：
canvas.scale(0.8f, 0.35f);
8.2scale(float sx, float sy, float px, float py)
scale(float sx, float sy)缩放也很好理解，但是它有一个重载方法scale(float sx, float sy, float px, float py)，后两个参数用于指定缩放的中心点，前两个参数用于指定横纵向的缩放比率值在0-1之间为缩小。
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); bitmap bitmap = bitmapfactory.decoderesource(mcontext.getresources(), r.drawable.kale);
canvas.scale(0.8f, 0.35f, bitmap.getwidth(), 0);
canvas.drawbitmap(bitmap, 0, 0, null);
}
我们发现图像往右边移动了一点。这是因为我们把缩放中心进行的改变，大家尝试改变下参数，多多理解理解。
8.3 rotate(float degrees)和rotate(float degrees, float px, float py)
rotate(float degrees)和重载方法rotate(float degrees, float px, float py)它们的作用是旋转画布。这个在上面已经多次用到了，就不再赘述了。
8.4 skew(float sx, float sy)
kew(float sx, float sy)是错切方法，两个参数与scale类似表示横纵向的错切比率。所谓错切就是把图片分割为不同的格子，类似于棋盘。然后移动上面的各个交点的位置，让图片进行变换的效果。
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); bitmap bitmap = bitmapfactory.decoderesource(mcontext.getresources(), r.drawable.kale);
canvas.skew(0.5f, 0f);
canvas.drawbitmap(bitmap, 0, 0, null);
}
效果：
8.5 setmatrix(matrix)
看名字就知道了，通过矩阵来进行变换。有关矩阵的一些知识，我在之前的文章中已经介绍过了，如果不了解计算原理，可以去参考下文的第七节：
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas); matrix matrix = new matrix();
matrix.setscale(0.8f, 0.35f);
matrix.posttranslate(100, 100);
canvas.setmatrix(matrix); bitmap bitmap = bitmapfactory.decoderesource(mcontext.getresources(), r.drawable.kale);
canvas.drawbitmap(bitmap, 0, 0, null);
}
本文大部分内容参考自：
http://blog.csdn.net/aigestudio/article/details/41960507
http://blog.csdn.net/aigestudio/article/details/42677973
http://blog.csdn.net/airk000/article/details/38925059
我记录在此，作为学习笔记。
from aigestudio（http://blog.csdn.net/aigestudio）power by aige 尊重原作者，感谢作者的无私分享！
