实际演示效果：

Canvas 画图基本步骤：

1、布局添加一个SurfaceView<?xml version="1.0" encoding="utf-8"?>

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity">

android:id="@+id/surfaceView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

2、在onCreate()中，加入：

SurfaceHolder surfaceHolder = SurfaceView.getHolder();surfaceHolder = surfaceView.getHolder();//Canvas画图很关键的一步3、Paint设置颜色、线宽、文字大小等属性

penOfGrid.setColor(gridColor); //设置画笔

penOfGrid.setStrokeWidth(1); //线宽

penOfGrid.setAntiAlias(true); //抗锯齿

penOfGrid.setTextSize(24); //文字大小，和线宽无关

penOfData.setColor(lineColor);

penOfData.setStrokeWidth(2);

penOfData.setAntiAlias(true);

penOfData.setTextSize(80);

4、开始画图：

(---坐标的(0，0)的位置是左上角，而不是为人熟知的左下角---)

Canvas canvas = surfaceHolder.lockCanvas();

canvas.drawLine(x1,y1,x2,y2,paint);//画线

canvas.drawColor(Color.BLACK);//画黑色 ...

5、结束画图:

surfaceHolder.unlockAndPost(canvas);

/**

* 绘制数据波形操作,数据缓存到了ArrayList中，本方法将其中数据绘制出来

* 用到的其他未在方法中声明的对象、变量须自己在合适的位置声明

* @param dataGroup 输入数据集合

*/private void drawData(ArrayList dataGroup){

//获得画布的宽高,绘制网格用到

widthOfCanvas = surfaceView.getWidth();

heightOfCanvas = surfaceView.getHeight();

canvas = surfaceHolder.lockCanvas(); // 锁定画布，开始绘图

canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG

| Paint.FILTER_BITMAP_FLAG));//抗锯齿

int xScale = 1; //横轴几个像素为一个单位

//bitmap：用于双缓冲画图，解决刷新闪烁问题

if(bitmap == null){//bitmap == null：第一次画图，bitmap没有初始化，就需要初始化，就是下面这一行

bitmap = Bitmap.createBitmap(widthOfCanvas,heightOfCanvas, Bitmap.Config.ARGB_8888);

Canvas tempCanvas = new Canvas(bitmap);//在bitmap中再新建一个画布Cancas，bitmap相当于SurfaceView了

tempCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG

| Paint.FILTER_BITMAP_FLAG));

tempCanvas.drawColor(backColor); //绘制背景色

/**

* 绘制网格

*/

for (int i = 0; i < widthOfCanvas / 30; i++) {

tempCanvas.drawLine(i * 30, 0, i * 30, heightOfCanvas, penOfGrid); //纵

}

for (int i = 0; i < heightOfCanvas / 30; i++) {

tempCanvas.drawLine(0, i * 30, heightOfCanvas, i * 30, penOfGrid); //横

}

float cx,cy,dx,dy; //画线需要的起点坐标和终点坐标

for (int i = 0;i

//起点：

cx = i * xScale;

cy = heightOfCanvas - heightOfCanvas * dataGroup.get(i)/3;//由于左上角为(0,0)，需要对画出来的图进行上下颠倒，

//并根据Canvas高度对数据进行一定比例的放大

//终点：

dx = (i + 1) * xScale;

dy = heightOfCanvas - heightOfCanvas * dataGroup.get(i+1)/3;

//在起点和重点之间画一条线段

tempCanvas.drawLine(cx,cy,dx,dy,penOfData);

}

tempCanvas.drawText("心率：--",20,100,penOfData);

//绘制完毕

canvas.drawBitmap(bitmap,0,0,penOfData);

}else { //如果不是第一次绘制，就没有必要重新初始化bitmap，节约资源，其他操作完全一样

Canvas tempCanvas = new Canvas(bitmap);

tempCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG

| Paint.FILTER_BITMAP_FLAG));

tempCanvas.drawColor(backColor); //Draw background color to Black

/**

* Draw grid

*/

for (int i = 0; i < widthOfCanvas / 30; i++) {

tempCanvas.drawLine(i * 30, 0, i * 30, heightOfCanvas, penOfGrid); //vertical lines

}

for (int i = 0; i < heightOfCanvas / 30; i++) {

tempCanvas.drawLine(0, i * 30, heightOfCanvas, i * 30, penOfGrid);

}

float cx,cy,dx,dy;

for (int i = 0;i

cx = i * xScale;

cy = heightOfCanvas - heightOfCanvas * dataGroup.get(i)/3;

dx = (i + 1) * xScale;

dy = heightOfCanvas - heightOfCanvas * dataGroup.get(i+1)/3;

tempCanvas.drawLine(cx,cy,dx,dy,penOfData);

}

tempCanvas.drawText("心率："+falseHeart(),20,100,penOfData);

canvas.drawBitmap(bitmap,0,0,penOfData);

}

//将双缓冲的图复制到SurfaceView上显示

surfaceHolder.unlockCanvasAndPost(canvas);

}