# canvas的一些有用的使用小结

## 4.canvas.translate 方法：

 int w = getWidth();
int h = getHeight();
Paint p = new Paint();
p.setColor(Color.parseColor("#00bcd4"));
canvas.drawCircle(w / 2, h / 2, 150, p);
p.setColor(Color.WHITE);
canvas.drawCircle(w / 2, h / 2, 140, p);
p.setColor(Color.BLACK);
p.setStrokeWidth(4);
for (int i = 0; i < 12; i++) {
canvas.drawLine(w / 2 - 140, h / 2, w / 2 - 130, h / 2, p);
canvas.rotate(360 / 12, w / 2, h / 2);
}

canvas.save();
canvas.translate(w / 2, h / 2);
canvas.drawLine(0, 0, 20, 0, p);
canvas.drawLine(0,0,0,50,p);
canvas.restore();

## 4.结合Matrix的使用

Matrix的对图像的处理可分为四类基本变换：

Translate 平移变换

Rotate 旋转变换

Scale 缩放变换

Skew 错切变换

## 5.canvas.clipRect

canvas裁剪：有6种裁剪，分别是：

Region.Op.DIFFERENCE   显示裁剪区以外的部分

<pre name="code" class="java">canvas.drawColor(Color.GRAY);
Paint p=new Paint();
canvas.clipRect(50, 50, 200, 300, Region.Op.DIFFERENCE       );
p.setAntiAlias(true);
Rect rect=new Rect();
rect.set(50, 50, 200, 400);
p.setColor(Color.RED);
canvas.drawRect(rect, p);
p.setColor(Color.parseColor("#00bcd4"));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);


Region.Op.REPLACE     是显示裁剪区以内的部分

<pre name="code" class="java"> canvas.clipRect(50, 50, 200, 300, Region.Op.REPLACE  );
p.setAntiAlias(true);
Rect rect=new Rect();
rect.set(50, 50, 200, 400);
p.setColor(Color.RED);
canvas.drawRect(rect, p);
p.setColor(Color.parseColor("#00bcd4"));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);


Region.Op.REVERSE_DIFFERENCE   两次裁剪区域的的差集部分：
 Paint p=new Paint();
canvas.clipRect(50, 50, 200, 300, Region.Op.REVERSE_DIFFERENCE  );
canvas.clipRect(50, 50, 100, 200, Region.Op.REVERSE_DIFFERENCE  );
p.setAntiAlias(true);
Rect rect=new Rect();
rect.set(50, 50, 200, 400);
p.setColor(Color.RED);
canvas.drawRect(rect, p);
p.setColor(Color.parseColor("#00bcd4"));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);

Region.Op.INTERSECT   两次裁剪区域的交集部分：

<pre name="code" class="java">canvas.drawColor(Color.GRAY);
Paint p=new Paint();
canvas.clipRect(50, 50, 200, 300, Region.Op.INTERSECT      );
canvas.clipRect(50, 50, 100, 200, Region.Op.INTERSECT        );
p.setAntiAlias(true);
Rect rect=new Rect();
rect.set(50, 50, 200, 400);
p.setColor(Color.RED);
canvas.drawRect(rect, p);
p.setColor(Color.parseColor("#00bcd4"));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);


Region.Op.UNION  两次裁剪的并集

Region.Op.XOR  补集 就是全集的减去交集生育部分显示

## 6.canvas.clipPath 方法：

Bitmap b= BitmapFactory.decodeResource(getResources(), R.mipmap.pic);
canvas.drawColor(Color.GRAY);
Paint p=new Paint();
Path path = new Path();
path.addCircle(getWidth() /2, getHeight()/2,155, Path.Direction.CW);
canvas.clipPath(path,Region.Op.INTERSECT);

p.setAntiAlias(true);
Rect rect=new Rect();
rect.set(50, 50, 200, 400);
p.setColor(Color.RED);
canvas.drawRect(rect, p);
p.setColor(Color.parseColor("#00bcd4"));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);

#### 讲一讲 Canvas 究竟是个啥

2016-12-19 17:55:33

#### 你必须知道的10个提高Canvas性能技巧

2017-03-15 14:50:05

#### Canvas 基本用途

2017-12-29 00:13:21

#### 让自己也能使用Canvas

2016-05-03 10:00:59

#### CANVAS的使用详解

2017-01-08 14:36:29

#### SVG 与 HTML5 的 canvas 优缺点

2016-12-19 10:12:02

#### 第六章 一张白纸好作画—Canvas画布（1）

2015-02-04 09:53:13

#### 网页打印的通用方法之canvas转换篇

2018-01-05 13:50:10

#### 打印canvas的内容

2017-02-10 16:48:49

#### 每日一个js实例15--canvas绘图内容打印

2016-12-09 09:23:01