Android自定义View基础：坐标系
Android自定义View基础：角度弧度
Android自定义View进阶：分类与流程

1.Canvas的常用操作速查表

API

2.Canvas详解

创建画笔：

//创建画笔
private Paint paint = new Paint();
private void initPaint(){
        mPaint.setColor(Color.BLACK);       //设置画笔颜色
        mPaint.setStyle(Paint.Style.FILL);  //设置画笔模式为填充
        mPaint.setStrokeWidth(10f);         //设置画笔宽度为10px
}

//构造函数
  public PaintView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

绘制点：

   canvas.drawPoint(200, 200, mPaint);     //在坐标(200,200)位置绘制一个点
        canvas.drawPoints(new float[]{          //绘制一组点，坐标位置由float数组指定
                500,500,
                500,600,
                500,700
        },mPaint);

图例

绘制直线：

//绘制直线需要两个点，初始点和结束点，同样绘制直线也可以绘制一条或者绘制一组：
    canvas.drawLine(300,300,500,600,mPaint);    // 在坐标(300,300)(500,600)之间绘制一条直线
        canvas.drawLines(new float[]{               // 绘制一组线 每四数字(两个点的坐标)确定一条线
                100,200,200,200,
                100,300,200,300
        },mPaint);

绘制矩形：
确定确定一个矩形最少需要四个数据，就是对角线的两个点的坐标值，这里一般采用左上角和右下角的两个点的坐标。
关于绘制矩形，Canvas提供了三种重载方法，第一种就是提供四个数值(矩形左上角和右下角两个点的坐标)来确定一个矩形进行绘制。 其余两种是先将矩形封装为Rect或RectF(实际上仍然是用两个坐标点来确定的矩形)，然后传递给Canvas绘制，如下：

    // 第一种
    canvas.drawRect(100,100,800,400,mPaint);

    // 第二种
    Rect rect = new Rect(100,100,800,400);
    canvas.drawRect(rect,mPaint);

    // 第三种
    RectF rectF = new RectF(100,100,800,400);
    canvas.drawRect(rectF,mPaint);

以上三种方法所绘制出来的结果是完全一样的。

    // 第二种
    canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

上面两种方法绘制效果也是一样的，但鉴于第二种方法在API21的时候才添加上，所以我们一般使用的都是第一种。

    // 矩形
    RectF rectF = new RectF(100,100,800,400);  

    // 绘制背景矩形
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(rectF,mPaint);

    // 绘制圆角矩形
    mPaint.setColor(Color.BLUE);
    canvas.drawRoundRect(rectF,700,400,mPaint);

    // 第一种
    RectF rectF = new RectF(100,100,800,400);
    canvas.drawOval(rectF,mPaint);

    // 第二种
    canvas.drawOval(100,100,800,400,mPaint);

同样，以上两种方法效果完全一样，但一般使用第一种。

canvas.drawCircle(500,500,400,mPaint);  // 绘制一个圆心坐标在(500,500)，半径为400 的圆。

绘制圆形有四个参数，前两个是圆心坐标，第三个是半径，最后一个是画笔。

// 第一种
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}

// 第二种
public void drawArc(float left, float top, float right, float bottom, float startAngle,
float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

从上面可以看出，相比于绘制椭圆，绘制圆弧还多了三个参数：

startAngle  // 开始角度
sweepAngle  // 扫过角度
useCenter   // 是否使用中心

通过字面意思我们基本能猜测出来前两个参数(startAngle， sweepAngel)的作用，就是确定角度的起始位置和扫过角度， 不过第三个参数是干嘛的？试一下就知道了,上代码：

    RectF rectF = new RectF(100,100,800,400);
    // 绘制背景矩形
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(rectF,mPaint);

    // 绘制圆弧
    mPaint.setColor(Color.BLUE);
    canvas.drawArc(rectF,0,90,false,mPaint);

    //-------------------------------------

    RectF rectF2 = new RectF(100,600,800,900);
    // 绘制背景矩形
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(rectF2,mPaint);

    // 绘制圆弧
    mPaint.setColor(Color.BLUE);
    canvas.drawArc(rectF2,0,90,true,mPaint);

上述代码实际上是绘制了一个起始角度为0度，扫过90度的圆弧，两者的区别就是是否使用了中心点，结果如下：

    RectF rectF = new RectF(100,100,800,400);
    // 绘制背景矩形
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(rectF,mPaint);

    // 绘制圆弧
    mPaint.setColor(Color.BLUE);
    canvas.drawArc(rectF,0,90,false,mPaint);

    //-------------------------------------

    RectF rectF2 = new RectF(100,600,800,900);
    // 绘制背景矩形
    mPaint.setColor(Color.GRAY);
    canvas.drawRect(rectF2,mPaint);

    // 绘制圆弧
    mPaint.setColor(Color.BLUE);
    canvas.drawArc(rectF2,0,90,true,mPaint);

STROKE                //描边
FILL                  //填充
FILL_AND_STROKE       //描边加填充

为了区分三者效果我们做如下实验：

    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setStrokeWidth(40);     //为了实验效果明显，特地设置描边宽度非常大

    // 描边
    paint.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(200,200,100,paint);

    // 填充
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(200,500,100,paint);

    // 描边加填充
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawCircle(200, 800, 100, paint);