本文共 6942 字，大约阅读时间需要 23 分钟。

五种方式:

BitmapShader bitmapShader;//位图渲染    LinearGradient linearGradient;//线性渲染    SweepGradient sweepGradient;//渐变渲染    RadialGradient radialGradient;//环形渲染    ComposeShader composeShader;//组合渲染

其中组合渲染和组合动画类似，但是组合渲染只能将两个渲染结合起来。

1、位图渲染

类似于给图片设置背景，这里有三种方式：图片比内容小，第一种就拉伸最后一个像素，第二种就重复图片，第三种是做镜像对称。可以分别设置X/Y方向上的填充模式

demo:X方向上使用重复。Y轴使用镜像

private void useBitmapShader(Canvas canvas) {        //使用BitmapShader        //        Shader.TileMode.CLAMP;//拉伸最后一个像素去铺满//        Shader.TileMode.REPEAT;//重复以铺满//        Shader.TileMode.MIRROR;//镜像翻转铺满        bitmapShader = new BitmapShader(BitmapFactory.decodeResource(getResources(), R.drawable.aipay),                Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);        paint.setShader(bitmapShader);        canvas.drawRect(new Rect(getPaddingLeft(), getPaddingTop(), getMeasuredWidth()                - getPaddingLeft() * 2                , getMeasuredHeight()), paint);        ;        //使用shapeDrawable也可以实现同样的效果        ShapeDrawable shapeDrawable = new ShapeDrawable(new OvalShape());        shapeDrawable.getPaint().setShader(bitmapShader);        shapeDrawable.setBounds(0, 0, ScreenSizeUtil.getScreenSize_Width(getContext()), getMeasuredHeight());//        shapeDrawable.draw(canvas);    }

效果图：

2.线性渐变

private void userLinerGradient(Canvas canvas) {        int color[] = {Color.parseColor("#000000"), Color.parseColor("#ff0000"), Color.parseColor("#ffffff")};        float percent[] = {0.3f, 0.4f, 0.3f};        //四个参数分别表示 起始的xy 结束的xy  如果开始是0，0 结束是 width,height,将是左上到右下斜向的        linearGradient = new LinearGradient(0.0f, getMeasuredHeight(), getMeasuredWidth(), getMeasuredHeight(), color, null, Shader.TileMode.REPEAT);        paint.setShader(linearGradient);        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);        ;        // canvas.drawText("测试文字的测试文字测试文字测试文字的测试文字测试文字", 0, getPaddingTop() + 150, paint);    }

效果：

3.环形渐变

private void userRadiusGradient(Canvas canvas) {        int color[] = {Color.parseColor("#000000"), Color.parseColor("#ff0000"), Color.parseColor("#ffffff")};        float percent[] = {0.1f, 0.5f, 0.4f};        radialGradient = new RadialGradient(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2, color, null, Shader.TileMode.CLAMP);        paint.setShader(radialGradient);         canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2, paint);       // canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);    }

效果:

4.梯度渐变

demo:

private void useSweepGradient(Canvas canvas) {        int color[] = {Color.parseColor("#000000"), Color.parseColor("#ff0000"), Color.parseColor("#ffffff")};        float percent[] = {0.1f, 0.8f, 0.1f};        //梯度的中心        sweepGradient = new SweepGradient(getMeasuredWidth()/2, getMeasuredHeight()/2, color, null);        paint.setShader(sweepGradient);        //canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, Dp2Px.dip2px(getContext(), 150), paint);        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);    }

效果图：

5.组合渲染

private void userComposeGradient(Canvas canvas) {        int color[] = {Color.parseColor("#000000"), Color.parseColor("#ff0000"), Color.parseColor("#ffffff")};        float percent[] = {0.1f, 0.8f, 0.1f};        linearGradient = new LinearGradient(0.0f, getMeasuredHeight(), getMeasuredWidth(), getMeasuredHeight(), color, null, Shader.TileMode.REPEAT);        bitmapShader = new BitmapShader(BitmapFactory.decodeResource(getResources(), R.drawable.aipay),                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);        composeShader = new ComposeShader(linearGradient, bitmapShader, PorterDuff.Mode.MULTIPLY);        paint.setShader(composeShader);        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);    }

6.使用线性渐变实现个文字跑马灯效果:一行文字上有个光点从左到右移动

使用线性渲染来出来，动态改变渲染的中心点

int index = 0;    private void testLed(Canvas canvas) {        int color[] = {Color.parseColor("#000000"), Color.parseColor("#ff0000"), Color.parseColor("#000000")};        float percent[] = {0.3f, 0.4f, 0.3f};        //四个参数分别表示 起始的xy 结束的xy  如果开始是0，0 结束是 width,height,将是左上到右下斜向的        linearGradient = new LinearGradient(getMeasuredWidth() / 10 * index, getMeasuredHeight(), getMeasuredWidth() / (10 * index + 1), getMeasuredHeight(), color, null, Shader.TileMode.MIRROR);        paint.setShader(linearGradient);        //canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);        ;        canvas.drawText("测试文字", 0, 50, paint);        if (index < 10) {            index = index + 1;        } else {            index = 0;        }        //主要是这个方法，否则就需要使用动画        postInvalidateDelayed(50);    }

7.实现雷达:一个大圆圈，里面有一个扇形在转动

圆圈+使用线性渐变绘制的扇形

private void drawLeiDaTwo(Canvas canvas) {        Paint paint_circle = new Paint();        int color[] = {Color.parseColor("#0000006f"), Color.parseColor("#ff00006f"), Color.parseColor("#0000006f")};        paint_circle.setStyle(Paint.Style.FILL);        paint_circle.setColor(getResources().getColor(android.R.color.holo_blue_light));        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2, paint_circle);        Paint paint_line = new Paint();        paint_line.setStyle(Paint.Style.STROKE);        paint_line.setColor(getResources().getColor(android.R.color.white));        //模拟雷达中间的几个圆圈        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2 / 9, paint_line);        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2 / 8, paint_line);        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2 / 7, paint_line);        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2 / 6, paint_line);        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2 / 5, paint_line);        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2 / 3, paint_line);        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2 / 2, paint_line);        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, getMeasuredWidth() / 2, paint_line);        SweepGradient sweepGradient1 = new SweepGradient(getMeasuredWidth() / 2, getMeasuredHeight() / 2, color, null);        sweepGradient1 = new SweepGradient(0, getMeasuredHeight(), color, null);        paint.setShader(sweepGradient1);        RectF rectF = new RectF(0, (getMeasuredHeight() - getMeasuredWidth()) / 2, getMeasuredWidth(), getMeasuredHeight() - (getMeasuredHeight() - getMeasuredWidth()) / 2);       //动态绘制扇形        canvas.drawArc(rectF,                nowStart, 90, true, paint        );        if (nowStart < 270) {            nowStart = nowStart + 90;        } else {            nowStart = 0;        }        postInvalidateDelayed(80);    }

效果图

转载地址：http://ixeci.baihongyu.com/