以圖形處理來說，我們最常用到的就是在一個View上畫一些圖片、形狀或者自定義的文字內容，這裡我們都是使用Canvas來實現的。你可以獲取View中的Canvas物件，繪製一些自定義形狀，然後呼叫View. invalidate方法讓View重新重新整理，然後繪製一個新的形狀，這樣達到2D動畫效果。下面我們就主要來了解下Canvas的使用方法。

Canvas物件的獲取方式有兩種：一種我們通過重寫View.onDraw方法，View中的Canvas物件會被當做引數傳遞過來，我們操作這個Canvas，效果會直接反應在View中。另一種就是當你想建立一個Canvas物件時使用的方法：

Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);

Canvas c = new Canvas(b);

上面程式碼建立了一個尺寸是100*100的Bitmap，使用它作為Canvas操作的物件，這時候的Canvas就是使用建立的方式。當你使用建立的Canvas在bitmap上執行繪製方法後，你還可以將繪製的結果提交給另外一個Canvas，這樣就可以達到兩個Canvas協作完成的效果，簡化邏輯。但是android SDK建議使用View.onDraw引數裡提供的Canvas就好，沒必要自己建立一個新的Canvas物件。接下來我們看看Canvas提供我們哪些繪製圖形的方法。我們建立一個自定義View物件，使用onDraw方法提供的Canvas進行繪製圖形。

CanvasDemoActivity.java：

1. package com.android.demo.uicontroller.graphics;
2. import android.app.Activity;
3. import android.content.Context;
4. import android.graphics.Canvas;
5. import android.graphics.Color;
6. import android.graphics.Paint;
7. import android.os.Bundle;
8. import android.view.View;
9. public class CanvasDemoActivity extends Activity {
10. @Override
11. protected void onCreate(Bundle savedInstanceState) {
12. super.onCreate(savedInstanceState);
13. setContentView(new CustomView1(this));
14. }
15. /**
16. * 使用內部類 自定義一個簡單的View
17. * @author Administrator
18. *
19. */
20. class CustomView1 extends View{
21. Paint paint;
22. public CustomView1(Context context) {
23. super(context);
24. paint = new Paint(); //設定一個筆刷大小是3的黃色的畫筆
25. paint.setColor(Color.YELLOW);
26. paint.setStrokeJoin(Paint.Join.ROUND);
27. paint.setStrokeCap(Paint.Cap.ROUND);
28. paint.setStrokeWidth(3);
29. }
30. //在這裡我們將測試canvas提供的繪製圖形方法
31. @Override
32. protected void onDraw(Canvas canvas) {
33. }
34. }
35. }

執行結果是一片黑色的區域，因為在自定義的CustomView中，我們沒有做任何的繪製操作。canvas提供的繪製圖形的方法都是以draw開頭的，我們可以檢視api：

從上面方法的名字看來我們可以知道Canvas可以繪製的物件有：

弧線(arcs)、填充顏色(argb和color)、 Bitmap、圓(circle和oval)、點(point)、線(line)、矩形(Rect)、圖片(Picture)、圓角矩形 (RoundRect)、文字(text)、頂點(Vertices)、路徑(path)。通過組合這些物件我們可以畫出一些簡單有趣的介面出來，但是光有這些功能還是不夠的，如果我要畫一個儀表盤(數字圍繞顯示在一個圓圈中)呢？ 幸好Android還提供了一些對Canvas位置轉換的方法：rorate、scale、translate、skew(扭曲)等，而且它允許你通過獲得它的轉換矩陣物件(getMatrix方法，不知道什麼是轉換矩陣？看這裡) 直接操作它。這些操作就像是雖然你的筆還是原來的地方畫，但是畫紙旋轉或者移動了，所以你畫的東西的方位就產生變化。為了方便一些轉換操作，Canvas 還提供了儲存和回滾屬性的方法(save和restore)，比如你可以先儲存目前畫紙的位置(save)，然後旋轉90度，向下移動100畫素後畫一些圖形，畫完後呼叫restore方法返回到剛才儲存的位置。下面我們就演示下canvas的一些簡單用法：

1. protected void onDraw(Canvas canvas) {
2. canvas.drawCircle(100, 100, 90, paint);
3. }

效果是：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. //繪製弧線區域
4. RectF rect = new RectF(0, 0, 100, 100);
5. canvas.drawArc(rect, //弧線所使用的矩形區域大小
6. 0, //開始角度
7. 90, //掃過的角度
8. false, //是否使用中心
9. paint);
10. }

使用下面的程式碼：

1. protected void onDraw(Canvas canvas) {
2. //繪製弧線區域
3. RectF rect = new RectF(0, 0, 100, 100);
4. canvas.drawArc(rect, //弧線所使用的矩形區域大小
5. 0, //開始角度
6. 90, //掃過的角度
7. true, //是否使用中心
8. paint);
9. }

兩圖對比我們可以發現，當 drawArcs(rect,startAngel,sweepAngel,useCenter,paint)中的useCenter為false時，弧線區域是用弧線開始角度和結束角度直接連線起來的，當useCenter為true時，是弧線開始角度和結束角度都與中心點連線，形成一個扇形。

1. protected void onDraw(Canvas canvas) {
2. canvas.drawColor(Color.BLUE);
3. }

canvas.drawColor是直接將View顯示區域用某個顏色填充滿。

1. @Override
2. protected void onDraw(Canvas canvas) {
3. //畫一條線
4. canvas.drawLine(10, 10, 100, 100, paint);
5. }

Canvas.drawOval：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. //定義一個矩形區域
4. RectF oval = new RectF(0,0,200,300);
5. //矩形區域內切橢圓
6. canvas.drawOval(oval, paint);
7. }

canvas.drawPosText：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. //按照既定點 繪製文字內容
4. canvas.drawPosText("Android777", new float[]{
5. 10,10, //第一個字母在座標10,10
6. 20,20, //第二個字母在座標20,20
7. 30,30, //....
8. 40,40,
9. 50,50,
10. 60,60,
11. 70,70,
12. 80,80,
13. 90,90,
14. 100,100
15. }, paint);
16. }

canvas.drawRect：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. RectF rect = new RectF(50, 50, 200, 200);
4. canvas.drawRect(rect, paint);
5. }
6. }

canvas.drawRoundRect：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. RectF rect = new RectF(50, 50, 200, 200);
4. canvas.drawRoundRect(rect,
5. 30, //x軸的半徑
6. 30, //y軸的半徑
7. paint);
8. }

canvas.drawPath：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. Path path = new Path(); //定義一條路徑
4. path.moveTo(10, 10); //移動到 座標10,10
5. path.lineTo(50, 60);
6. path.lineTo(200,80);
7. path.lineTo(10, 10);
8. canvas.drawPath(path, paint);
9. }

canvas.drawTextOnPath：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. Path path = new Path(); //定義一條路徑
4. path.moveTo(10, 10); //移動到 座標10,10
5. path.lineTo(50, 60);
6. path.lineTo(200,80);
7. path.lineTo(10, 10);
8. // canvas.drawPath(path, paint);
9. canvas.drawTextOnPath("Android777開發者部落格", path, 10, 10, paint);
10. }

位置轉換方法，canvas.rorate和canvas.translate：

1. @Override
2. protected void onDraw(Canvas canvas) {
3. paint.setAntiAlias(true);
4. paint.setStyle(Style.STROKE);
5. canvas.translate(canvas.getWidth()/2, 200); //將位置移動畫紙的座標點:150,150
6. canvas.drawCircle(0, 0, 100, paint); //畫圓圈
7. //使用path繪製路徑文字
8. canvas.save();
9. canvas.translate(-75, -75);
10. Path path = new Path();
11. path.addArc(new RectF(0,0,150,150), -180, 180);
12. Paint citePaint = new Paint(paint);
13. citePaint.setTextSize(14);
14. citePaint.setStrokeWidth(1);
15. canvas.drawTextOnPath("http://www.android777.com", path, 28, 0, citePaint);
16. canvas.restore();
17. Paint tmpPaint = new Paint(paint); //小刻度畫筆物件
18. tmpPaint.setStrokeWidth(1);
19. float y=100;
20. int count = 60; //總刻度數
21. for(int i=0 ; i <count ; i++){
22. if(i%5 == 0){
23. canvas.drawLine(0f, y, 0, y+12f, paint);
24. canvas.drawText(String.valueOf(i/5+1), -4f, y+25f, tmpPaint);
25. }else{
26. canvas.drawLine(0f, y, 0f, y +5f, tmpPaint);
27. }
28. canvas.rotate(360/count,0f,0f); //旋轉畫紙
29. }
30. //繪製指標
31. tmpPaint.setColor(Color.GRAY);
32. tmpPaint.setStrokeWidth(4);
33. canvas.drawCircle(0, 0, 7, tmpPaint);
34. tmpPaint.setStyle(Style.FILL);
35. tmpPaint.setColor(Color.YELLOW);
36. canvas.drawCircle(0, 0, 5, tmpPaint);
37. canvas.drawLine(0, 10, 0, -65, paint);
38. }

上面幾個例子基本已經將常用的canvas.draw*方法測試過了，我們結合一些事件，做一些有使用者互動的應用：

1. package com.android777.demo.uicontroller.graphics;
2. import java.util.ArrayList;
3. import android.app.Activity;
4. import android.content.Context;
5. import android.graphics.Canvas;
6. import android.graphics.Color;
7. import android.graphics.Paint;
8. import android.graphics.PointF;
9. import android.os.Bundle;
10. import android.view.MotionEvent;
11. import android.view.View;
12. public class CanvasDemoActivity extends Activity {
13. @Override
14. protected void onCreate(Bundle savedInstanceState) {
15. super.onCreate(savedInstanceState);
16. setContentView(new CustomView1(this));
17. }
18. /**
19. * 使用內部類 自定義一個簡單的View
20. * @author Administrator
21. *
22. */
23. class CustomView1 extends View{
24. Paint paint;
25. private ArrayList<PointF> graphics = new ArrayList<PointF>();
26. PointF point;
27. public CustomView1(Context context) {
28. super(context);
29. paint = new Paint(); //設定一個筆刷大小是3的黃色的畫筆
30. paint.setColor(Color.YELLOW);
31. paint.setStrokeJoin(Paint.Join.ROUND);
32. paint.setStrokeCap(Paint.Cap.ROUND);
33. paint.setStrokeWidth(3);
34. }
35. @Override
36. public boolean onTouchEvent(MotionEvent event) {
37. graphics.add(new PointF(event.getX(),event.getY()));
38. invalidate(); //重新繪製區域
39. return true;
40. }
41. //在這裡我們將測試canvas提供的繪製圖形方法
42. @Override
43. protected void onDraw(Canvas canvas) {
44. for (PointF point : graphics) {
45. canvas.drawPoint(point.x, point.y, paint);
46. }
47. // super.onDraw(canvas);
48. }
49. }
50. }

當用戶點選時將出現一個小點，拖動時將畫出一條用細點組成的虛線：

canvas的應用

canva還可以製作很多自定義控制元件，比如google日曆的monthview就是用canvas繪製出來的，github上有很多使用canva的專案，所有的圖表庫都是用canvas繪製的。