Android利用Canvas繪圖功能來繪製五角星（升級版）

在上一篇文章中，我們利用直線的旋轉繪製了五角星。出現了五角星會跑出界面 的情況。

我們就在這兒解決一下這個問題，並呈現另一種實現方式——函數畫五角星。

上一篇問題解決

利用Canvas實現繪圖功能（繪製五角星）

由於，隨機畫五角星，使得起始點是隨機的，導致可以在移動的畫布上隨機畫，因此會跑出界外。在這兒，我們加入代碼，使其記住位置。改進代碼如下：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.Random;

public class CanvasView extends View {
    public CanvasView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint1 = new Paint();

        for (int i = 0; i < 10; i++) {

            Paint paint = paint1;
            paint.setAntiAlias(true);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(5);
            paint.setColor(Color.GREEN);
            paint.setTextSize(24);
            int x = (int) (Math.random() * 600 + 200);
            int y = (int) (Math.random() * 1000 + 100);
            int r = (int) (Math.random() * 250 + 20);
            canvas.save();
            canvas.translate(x, y);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.restore();
        }
    }
}

這樣，運行出來結果如下圖：

有時候可能會出現五角星的角出界面，這只是五角星邊的問題。是符合實驗要求的。

利用Canvas繪圖功能來繪製五角星（升級版）

過程

思路和上一篇文章中的思路大體一樣，上篇文章網址：https://blog.csdn.net/qq_44164791/article/details/106147674
不同的只有繪製五角星的思路及代碼

先找出各個點，計算出五角星各條線之間的夾角，然後利用path.moveTo();將各個點用線段連接起來，就可以繪製成五角星。具體代碼如下：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import java.util.Random;


public class CanvasView extends View {

    private float xA,yA,xB,yB,xC,yC,xD,yD,xE,yE,xF,yF,xG,yG,xH,yH,xI,yI,xJ,yJ,x,y;//各個點的定義
    private int r;

    public CanvasView(Context context, AttributeSet attrs){
        super(context,attrs);
    }
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint=new Paint();//定義一個畫筆
        paint.setColor(Color.RED);//畫筆顏色
        canvas.drawRect(0,0,2000,2000,paint);//背景顏色所設計範圍
        //canvas.drawRect(700,1000,700,1000,paint);
        //paint.setStyle(Paint.Style.STROKE);//畫筆風格1（空心）
        paint.setStyle(Paint.Style.STROKE);//畫筆風格2（實心）
        paint.setAntiAlias(true);//設置抗鋸齒
        paint.setStrokeWidth(5);//畫筆寬度

        //循環
        for (int i=0;i<10;i++){
            //五角星顏色
            paint.setColor(Color.YELLOW);
            //隨機生成A點座標和五角星邊長
            Random random=new Random();
            int min=50;
            int max=100;
            r=random.nextInt(max)%(max-min+1)-min;
            x=(float) Math.random()*700;
            y=(float) Math.random()*1000;

            //標出五角星各個點的座標
            xA=x;
            yA=y;
            xB=x+r;
            yB=y;
            xC=(float)(x+r+r*Math.sin(Math.toRadians(18)));
            yC=(float)(y+r*Math.cos(Math.toRadians(18)));
            xD=(float) (x+r+2*r*Math.sin(Math.toRadians(18)));
            yD=y;
            xE=(float) (x+2*r+2*r*Math.sin(Math.toRadians(18)));
            yE=y;
            xF=(float) (x+2*r+2*r*Math.sin(Math.toRadians(18))-r*Math.cos(Math.toRadians(36)));
            yF=(float)(y-r*Math.sin(Math.toRadians(36)));
            xG=(float) (x+2*r+2*r*Math.sin(Math.toRadians(18))-r*Math.cos(Math.toRadians(36))+r*Math.sin(Math.toRadians(27)));
            yG=(float)(y-r*Math.sin(Math.toRadians(36))-r*Math.cos(Math.toRadians(27)));
            xH=(float)(x+r*Math.cos(Math.toRadians(36))-r*Math.sin(Math.toRadians(27))+r*Math.cos(Math.toRadians(27)));
            yH=(float)(y-r*Math.sin(Math.toRadians(36))-r*Math.cos(Math.toRadians(27))+r*Math.sin(Math.toRadians(27)));
            xI=(float)(x+r*Math.cos(Math.toRadians(36))-r*Math.sin(Math.toRadians(27)));
            yI=(float)(y-r*Math.sin(Math.toRadians(36))-r*Math.cos(Math.toRadians(27)));
            xJ=(float)(x+r*Math.cos(Math.toRadians(36)));
            yJ=(float)(y-r*Math.sin(Math.toRadians(36)));
            Path path=new Path();//定義一個繪製多邊形的類
            //開始繪製五角星
            path.moveTo(xA,yA);//起始點
            path.lineTo(xB,yB);
            path.lineTo(xC,yC);
            path.lineTo(xD,yD);
            path.lineTo(xE,yE);
            path.lineTo(xF,yF);
            path.lineTo(xG,yG);
            path.lineTo(xH,yH);
            path.lineTo(xI,yI);
            path.lineTo(xJ,yJ);
            path.close();//閉合
            canvas.drawPath(path,paint);
        }
    }
}

結果

在代碼中加入了背景顏色，使得看起來更光鮮豔麗