使用 switch case 语句状态机在 javascript 中绘制形状

Question

我正在尝试修改我在 Internet 上找到的一些 getElementById 代码，以编写一个使用 switch/case 语句的函数，以便我可以使用相同的函数绘制不同的形状。基本上，我想为形状绘制命令创建一个微型状态机。 JavaScript 对我来说还是新的，所以我可能遗漏了一些非常明显的东西。干杯！

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Draw a circle</title>
    <script src="draw_shapes.js"></script>
</head>
<body onload="draw01();">
    <canvas id="circle" width="150" height="150"></canvas>
</body>
</html>

draw_shapes.js

function draw01() {
    var canvas = document.getElementById('circle');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var X = canvas.width / 2;
        var Y = canvas.height / 2;
        var R = 45;
        ctx.beginPath();
        ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#000000';
        ctx.stroke();

    }
}

function draw02() {
    const canvas = document.getElementById(canvas.id);
    const ctx = canvas.getContext('2d');
    switch (canvas.id) {
        case "circle":
            var X = canvas.width / 2;
            var Y = canvas.height / 2;
            var R = 45;
            ctx.beginPath();
            ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
            ctx.lineWidth = 3;
            ctx.strokeStyle = '#000000';
            ctx.stroke();
            break;
    }
}

第二次迭代。仍然不太正常，但我已经按照我的设想进行了设置。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Draw a circle</title>
    <script src="draw_shapes_02.js"></script>
</head>
<body onload="draw(CIRCLE);">
</body>
</html>

draw_shapes_02.js

//shape enumeration (an object with constant variables with immutable property values)
const shapes = {
    CIRCLE: "circle",
    RECTANGLE: "rectangle",
    TRIANGLE: "triangle",
    HOUSE: "house",
    DEFAULT:"default",
}

Object.freeze(shapes);

// shape default setting and error
let shape = shapes.DEFAULT;

if (!shape) {
    throw new Error("Shape is not defined");
}

// shape state machine
function draw(shapes) {
    var canvas = document.getElementById("shape");
    var ctx = canvas.getContext('2d');
    switch ("shape") {
        case shapes.CIRCLE:
            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.arc(150, 60, 50, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();
            break;
        case shapes.RECTANGLE:
            ctx.beginPath();
            ctx.fillStyle = "green";
            ctx.rect(100, 130, 100, 50);
            ctx.fill();
            ctx.closePath();
            break;
        case shapes.TRIANGLE:
            ctx.beginPath();
            ctx.fillStyle = "yellow";
            ctx.moveTo(150, 200);
            ctx.lineTo(200, 250);
            ctx.lineTo(100, 250);
            ctx.lineTo(150, 200);
            ctx.fill();
            ctx.closePath();
            break;
        case shapes.HOUSE:
            ctx.lineWidth = 10;
            ctx.strokeRect(75, 140, 150, 110);
            ctx.fillRect(130, 190, 40, 60);
            ctx.beginPath();
            ctx.moveTo(50, 140);
            ctx.lineTo(150, 60);
            ctx.lineTo(250, 140);
            ctx.closePath();
            ctx.stroke();
            break;
        case shapes.DEFAULT:
            break;
    }
}

Answer 1

我已经简化了一点，但您可以根据需要再次复杂化:)

function draw(shape) {
 
    var canvas = document.getElementById("CIRCLE");
    var ctx = canvas.getContext('2d');
   console.log(shape);
    switch (shape) {
        
        case  "CIRCLE":
            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.arc(150, 60, 50, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();
            break;
        case "RECTANGLE":
            ctx.beginPath();
            ctx.fillStyle = "green";
            ctx.rect(100, 130, 100, 50);
            ctx.fill();
            ctx.closePath();
            break;
        case "TRIANGLE":
            ctx.beginPath();
            ctx.fillStyle = "yellow";
            ctx.moveTo(150, 200);
            ctx.lineTo(200, 250);
            ctx.lineTo(100, 250);
            ctx.lineTo(150, 200);
            ctx.fill();
            ctx.closePath();
            break;
        case "HOUSE":
            ctx.lineWidth = 10;
            ctx.strokeRect(75, 140, 150, 110);
            ctx.fillRect(130, 190, 40, 60);
            ctx.beginPath();
            ctx.moveTo(50, 140);
            ctx.lineTo(150, 60);
            ctx.lineTo(250, 140);
            ctx.closePath();
            ctx.stroke();
            break;
       default:
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(0,0,150,75);
            break;
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Draw a circle</title>
 </head>
<body onload="draw('HOUSE');">
 <canvas width="240" height="297" style="border:1px solid #d3d3d3;" id="CIRCLE"></canvas>
</body>
</html>

使用 switch case 语句状态机在 javascript 中绘制形状

Using a switch case statement state machine to draw shapes in javascript

javascript

canvas

state-machine

switch-statement