Canvas簡介
Canvas也就是Android中的畫布，它儲存了一些列的draw方法，你可以是用Canvas繪製圖形、文字和點陣圖等，其功能可謂是十分的強大，幾乎可以繪製所有的影象和文字。既然Canvas功能如此強大，其豐富了Android的圖形，也是Android圖形學不可或缺的類，而學習和熟練Canvas，可謂是學習Android UI的重點之一，接下來我們開始學習Canvas的API。
Canvas繪圖
既然Canvas提供了繪製圖形的功能，那麼看下其對應的API有那些。
繪製直線
public class CanvasView extends View {
Paint paint;
public CanvasView(Context context) {
this(context,null);
}
public CanvasView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
canvas.drawLine(0, 0, 100, 100, paint);
}
}
複製程式碼使用陣列，繪製直線
float []pts = {0,0,100,100,200,200,300,300};
canvas.drawLines(pts, paint);
複製程式碼先繪製（0，0）到（100，100）的直線，然後繪製（200，200）到（300，300）的直線。
定義陣列，也可以使用下面語句來繪製直線
drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count, @NonNull Paint paint)
複製程式碼pts：座標陣列 offset：設定線的間隔距離 count：繪製直線的條數 paint：畫筆
drawPoint
繪製點：
drawPoint(float x, float y, @NonNull Paint paint)
複製程式碼繪製多個點：
float []pts = {0,0,100,100,200,200,300,300};
canvas.drawPoints(pts, paint);
複製程式碼drawRect
繪製矩形，矩形區域有兩種表示方式：Rect和RectF，Rect表示int型別，RectF表示float型別。
RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);
複製程式碼也可以如下表示：
drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)
複製程式碼drawRoundRect
使用drawRoundRect，繪製圓角矩形
drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
rx：x軸的圓角半徑大小 ry：y軸的圓角半徑大小
RectF r = new RectF(100, 100, 400, 500);
canvas.drawRoundRect(r, 100, 100, paint);
複製程式碼drawCircle
繪製圓 ：
drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
複製程式碼cx、cy：圓心座標 radius：半徑
canvas.drawCircle(300, 300, 200, paint);
複製程式碼drawOval
使用drawOval函式繪製橢圓
drawOval(@NonNull RectF oval, @NonNull Paint paint) oval：定義的矩形 paint：畫筆
除了上述方法引數，可以使用以下方法引數：
drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)
之所以提供一個矩形區域，是因為該橢圓是矩形的內切圓。
RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);
canvas.drawOval(r, paint);
複製程式碼drawArc
使用drawArc方法繪製扇形圖。
drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
複製程式碼oval：矩形，該扇形是在矩形區域內繪製的，而且圍繞著矩形的中心點來繪製。 startAngle：開始角度，相對X軸正方向 sweepAngle：畫多少角度的弧度 useCenter：false表示只有一個純弧線，true表示閉合的邊 paint：畫筆
RectF r = new RectF(100, 100, 400, 500);
canvas.drawRect(r, paint);
canvas.drawArc(r, 0, 90, true, paint);//順時針旋轉90度
複製程式碼drawPath
使用drawPath來繪製路徑，更加靈活的繪製出各式各樣的圖形。繪製路徑，我們需要理解以下幾個方法： 1）moveTo(float x, float y)：畫筆落筆的位置 2）lineTo(float x, float y)：畫筆移動的到（x，y）座標，並沿著繪製出路徑。 3）cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)：實現貝塞爾曲線路徑， (x1,y1) 為控制點，(x2,y2)為控制點，(x3,y3) 為結束點。 4）quadTo(float x1, float y1, float x2, float y2)：也是繪製貝塞爾曲線，即橢圓曲線。(x1，y1)控制點，(x2，y2)結束點。 5）arcTo：繪製弧線。
Path path = new Path();
path.moveTo(100, 100);
path.lineTo(200, 100);
path.cubicTo(250, 200, 350, 300, 450, 400);
path.close();
canvas.drawPath(path, paint);
複製程式碼弧線
RectF r = new RectF(100, 100, 400, 500);
Path path = new Path();
path.addArc(r, 30, 70);
canvas.drawPath(path, paint);
複製程式碼圓角矩形路徑
RectF r = new RectF(100, 100, 400, 500);
Path path = new Path();
float radii[] = {//左上角開始，順時針依次的角度
10,//x1
10,//y1
10,//x2
10,//y2
10,//x3
10,//y30
50,//x4
60};//y4
path.addRoundRect(r, radii, Path.Direction.CCW);
canvas.drawPath(path, paint);
複製程式碼Canvas變換技巧
Canvas變換包括： 1）平移（Translate） 2）縮放（Scale） 3）旋轉（Rotate） 4）斜拉畫布（Skew） 5）裁剪畫布（clip）
平移
RectF r = new RectF(0, 0, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
//將畫布平移
canvas.translate(50, 50);
canvas.drawRect(r, paint);
複製程式碼上圖中畫布平移了，藍色的矩形平移了，但是紅色的矩形沒有平移，是因為當canvas執行drawXXX的時候就會新建一個新的畫布圖層，而平移知識平移新的圖層。
RectF r = new RectF(0, 0, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
//將畫布平移
canvas.translate(50, 50);
canvas.drawRect(r, paint);
RectF r2 = new RectF(0, 0, 400, 500);
paint.setColor(Color.GREEN);
canvas.drawRect(r2, paint);
複製程式碼從上圖中可以看到綠色矩形覆蓋了藍色的矩形，雖然draw的時候，新建了一個畫布圖層，但是還是會沿用之前設定的平移變換。不可逆的。解決這種情況需要使用save和restore來解決。
縮放
scale(float sx, float sy)
sx、sy：分別對x/y方向的一個縮放係數，畫布的縮放會導致裡面所有的繪製的東西都會有一個縮放效果。
RectF r = new RectF(0, 0, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.scale(1.5f, 0.5f);
canvas.drawRect(r, paint);
複製程式碼旋轉
rotate(float degrees)，degrees：旋轉角度，順時針旋轉 rotate(float degrees, float px, float py)，degrees旋轉角度，(px,py)旋轉中心點座標
RectF r = new RectF(200, 200, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.rotate(45);
canvas.drawRect(r, paint);
複製程式碼斜拉畫布
skew(float sx, float sy)：sx,sy傾斜度
RectF r = new RectF(200, 200, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.skew(1.73f, 0);
canvas.drawRect(r, paint);
複製程式碼裁剪畫布
clipRect(@NonNull Rect rect) rect：裁剪的矩形區域
RectF r = new RectF(200, 200, 400, 500);
canvas.drawRect(r, paint);
paint.setColor(Color.BLUE);
canvas.clipRect(new Rect(250, 250, 300, 400));
canvas.drawColor(Color.YELLOW);
複製程式碼理解canvas
Canvas畫布的正確的理解： 1）當canvas執行drawXXX的時候就會新建一個新的畫布圖層
2）雖然後面新建了一個畫布圖層，但是還是會沿用之前設定的平移變換。不可逆的。（save和restore來解決）