canvas五角星和矩形会碰撞出什么样的火花-CFANZ编程社区

话不多说，直接上代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DrawCanvas</title>
        <script src="./DrawCanvas.js"></script>
    </head>
    <body>
        <div>
            <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid #d3d3d3;">
                您的浏览器不支持 HTML5 canvas 标签。
            </canvas>
        </div>
    </body>
    <script>
        var width = 1620;
        var height = 1080;
        var step = width / 30;
        var drawCanvas = DrawCanvas.createNew();
        drawCanvas.canvas = document.getElementById("myCanvas");
        if (drawCanvas.canvas) {
            drawCanvas.canvas.setAttribute("width", width);
            drawCanvas.canvas.setAttribute("height", height);
            drawCanvas.canvas.style.zIndex = 1;
            drawCanvas.canvas.style.position = "absolute";
            drawCanvas.canvas.style.top = 0;
            drawCanvas.canvas.style.left = 0;
            drawCanvas.initCanvasContext();
        }
        if (drawCanvas.canvas) {
            drawCanvas.setFillColor("#F40002");
            drawCanvas.drawRectangle(
                {
                    x: 0,
                    y: 0
                }, width, height, 1, 1);
            
            drawCanvas.setFillColor("#FAF408");
            drawCanvas.drawPentangle(
                {
                    x: 5 * step,
                    y: 5 * step
                }, 3 * step, 1, 1);
            drawCanvas.drawPentangle(
                {
                    x: 10 * step,
                    y: 2 * step
                }, 1 * step, 1, 1);
            drawCanvas.drawPentangle(
                {
                    x: 12 * step,
                    y: 4 * step
                }, 1 * step, 1, 1);
            drawCanvas.drawPentangle(
                {
                    x: 12 * step,
                    y: 7 * step
                }, 1 * step, 1, 1);
            drawCanvas.drawPentangle(
                {
                    x: 10 * step,
                    y: 9 * step
                }, 1 * step, 1, 1);
        }
    </script>
</html>

DrawCanvas.js

function drawRectangle(context, point, width, height, lineType, fillType) {
    if (!context) return;

    if(lineType === 0) {
        context.setLineDash([3, 3]);
    } else if(lineType === 1) {
        context.setLineDash([]);
    }

    if (fillType === 0)
        context.strokeRect(point.x, point.y, width, height);
    else if(fillType === 1)
        context.fillRect(point.x, point.y, width, height);
    else {
        context.strokeRect(point.x, point.y, width, height);
        context.fillRect(point.x, point.y, width, height);
    }
}

function calculatePentanglePoints(center, r) {
    var points = new Array();
    var point = new Object();
    var radian = 72 * Math.PI / 180;

    point.x = center.x;
    point.y = center.y - r;
    points.push(point);

    point = new Object();
    point.x = center.x + r * Math.sin(radian);
    point.y = center.y - r * Math.cos(radian);
    points.push(point);

    point = new Object();
    radian = 36 * Math.PI / 180;
    point.x = center.x + r * Math.sin(radian);
    point.y = center.y + r * Math.cos(radian);
    points.push(point);

    point = new Object();
    point.x = center.x - r * Math.sin(radian);
    point.y = center.y + r * Math.cos(radian);
    points.push(point);

    point = new Object();
    radian = 72 * Math.PI / 180;
    point.x = center.x - r * Math.sin(radian);
    point.y = center.y - r * Math.cos(radian);
    points.push(point);

    return points;
}

function drawPentangle(context, center, r, lineType, fillType) {
    if (!context) return;

    if(lineType === 0) {
        context.setLineDash([3, 3]);
    } else if(lineType === 1) {
        context.setLineDash([]);
    }

    const pentanglePoints = calculatePentanglePoints(center, r);
    for (let i = 0; i < 5; i++) {
        console.log("[" + pentanglePoints[i].x + ", " + pentanglePoints[i].y + "]");
    }
    context.beginPath();
    context.moveTo(pentanglePoints[0].x, pentanglePoints[0].y);
    context.lineTo(pentanglePoints[3].x, pentanglePoints[3].y);
    context.lineTo(pentanglePoints[1].x, pentanglePoints[1].y);
    context.lineTo(pentanglePoints[4].x, pentanglePoints[4].y);
    context.lineTo(pentanglePoints[2].x, pentanglePoints[2].y);
    context.closePath();

    if (fillType === 0)
        context.stroke();
    else if(fillType === 1)
        context.fill();
    else {
        context.fill();
        context.stroke();
    }
}

var DrawCanvas = {
    createNew: function() {
        var drawCanvasObj = {};
        drawCanvasObj.canvas = undefined;
        drawCanvasObj.context = undefined;
        drawCanvasObj.initCanvasContext = function() {
            drawCanvasObj.context = drawCanvasObj.canvas.getContext("2d");
            drawCanvasObj.context.strokeStyle = "black";
            drawCanvasObj.context.fillStyle = "red";
            drawCanvasObj.context.lineWidth = 1;
        };
        drawCanvasObj.setStrokeColor = function(color) {
            drawCanvasObj.context.strokeStyle = color;
        };
        drawCanvasObj.setFillColor = function(color) {
            drawCanvasObj.context.fillStyle = color;
        };
        drawCanvasObj.drawRectangle = function(leftTop, width, height, lineType, fillType) {
            if (!drawCanvasObj.context) return;
            drawRectangle(drawCanvasObj.context, leftTop, width, height, lineType, fillType);
        };
        drawCanvasObj.drawPentangle = function(center, r, lineType, fillType) {
            if (!drawCanvasObj.context) return;
            drawPentangle(drawCanvasObj.context, center, r, lineType, fillType);
        };
        return drawCanvasObj;
    }
};