canvas 是绘图的基础 API ，我们实现自定义 view ，绘制的部分都只能依靠 canvas 来实现。借用 GcsSloop 魔法师的话来说：
一般来说，比较基础的东西有两大特点:
- 可操作性强：由于这些是构成上层的基础，所以可操作性必然十分强大。
- 比较难用：各种方法太过基础，想要完美的将这些操作组合起来有一定难度。
所以对于 canvas 大家也不要有什么负担，我们静下心来，花上一些时间把 canvas 搞明白是非常必要的，也花不了大家多少时间，canvas 是看着难，但是不难懂的部分
Snip20181020_26.png
上面就是 canvas 的全部 API 操作了，忘了的可以来看哦，本文是科普查阅文，解释不是很详细，更多的请看参考资料
drawColor 绘制颜色
Snip20180718_3.png
canvas.drawColor(Color.BLUE); //绘制蓝色
在 canvas 画布上绘制颜色就是绘制背景颜色，这个函数不能控制绘制区域，那么就是在整个画布画一个颜色，和背景色有什么区别。而且通过绘制颜色来设置背景色比设置背景图片合适的多，绘制颜色课不会产生 bitmap 位图，内存上开销少太多了
绘制点
Snip20180718_4.png
// 绘制一个点
canvas.drawPoint(200, 200, mPaint);
// 绘制一组点，参数以数组形式传入
canvas.drawPoints(new float[]{
200,200,
200,230,
200,260,
200,290
},mPaint);
画点很简单了，一看便知，参数上可以接受一个组数，也可以接受一对数字
绘制线
Snip20180718_5.png
// 绘制一个点，4个数字，2个点确定一条线
canvas.drawLine(300,300,500,600,mPaint);
// 绘制一组点，参数以数组形式传入
canvas.drawLines(new float[]{
200,200,260,200,
200,230,260,230,
400,230,800,530
},mPaint);
和画点一样，画线也是很简单的多， 一样可以接受一组或是多组参数，注意点不连续的话，画出来的线也是不连续的
绘制矩形
Snip20180720_2.png
// 第一种
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);
2个点能确定一条线，那么对角线的2个点就能确定一个矩形。具体的 api 3种，区别就是传参形式比一样，本质的都是对角线2个点的 x，y 坐标
Rect 和 RectF 有什么区别吗？
- 区别就是精度不同，Rect是int(整形)的，而RectF是float(单精度浮点型)的
绘制圆角矩形
Snip20180720_4.png
// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawRoundRect(rectF,30,30,mPaint);
// 第二种 API21
canvas.drawRoundRect(100,100,800,400,30,30,mPaint);
第二种方法在API21的时候才添加上，所以我们一般使用的都是第一种
圆角矩形比单纯的矩形多了2个参数，rx、ry 描述了一个矩形的长和宽，圆角说白了就是一个弧线，我们可以用一个矩形来画一个弧，所以这里用 rx、ry 来描述圆弧，注意这个弧既可以是正圆的圆弧，也可以是椭圆的圆弧
005Xtdi2jw1f2748fjw2bj308c0dwmx8.jpg
绘制椭圆
Snip20180720_6.png
// 第一种
RectF rectF = new RectF(100,100,800,400);
canvas.drawOval(rectF,mPaint);
// 第二种
canvas.drawOval(100,100,800,400,mPaint);
有了上面圆角矩形的铺垫，到这里用一个矩形来描述椭圆大家就能理解了把，其实不光是椭圆，弧也可以用矩形来画
005Xtdi2jw1f274bq1h4rj308c0dwjrl.jpg
绘制弧
Snip20180722_7.png
1785445-e7ae80cbc886632f.png
// 第一种
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度在哪的问题，这里画弧，自然坐标原点在矩形的中心，角度的增加是顺时针的，所以 0-90 度就在上图的位置了
绘制圆
Snip20180724_9.png
canvas.drawCircle(500,500,400,mPaint);
canvas 学习到这里，画圆就很简单了，3个参数猜也能才出来是啥了，前面2个是圆形中心点坐标，后面是半径
网友评论