ctx.strokeStyle 有效，但没有错误消息的 ctx.fillStyle 无效

Question

这是我制作越南国旗的代码。 出于某种原因，只有strokeStyle有效，而fillStyle无效。 我不知道为什么。 我试图去除红色以仅在 canvas 上显示黄色，但这只会使整个 canvas 变为黄色。

<!DOCTYPE html>
<html lang="no-NB">
<head>
    <title>Canvas Vietnam Flagg</title>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge" />
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            background-color: #333;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Arial, Helvetica, sans-serif;
            min-height: 100vh;
            margin: 0;
        }
        #canvas {
            background: #f0f0f0;
            border-radius: 0px;
        }
    </style>
</head>
<body>
<h1>Vietnam flagg</h1>

<canvas id="canvas" width="640"
        height="426"></canvas>

<script>
    const canvas =document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    // bakgrunn
    ctx.fillStyle = "rgb(218, 37, 29)";
    ctx.fillRect(0,0,640, 426);
    // stjerne
    ctx.beginPath();
    // 2-3
    ctx.moveTo(320, 86);
    ctx.lineTo(278, 170);
    // 3-4
    ctx.moveTo(278, 170);
    ctx.lineTo(194, 170);
    // 4-5
    ctx.moveTo(194, 170);
    ctx.lineTo(257, 233);
    // 5-6
    ctx.moveTo(257, 233);
    ctx.lineTo(236, 317);
    // 6-7
    ctx.moveTo(236, 317);
    ctx.lineTo(320, 275);
    // 7-8
    ctx.moveTo(320, 275);
    ctx.lineTo(404, 317);
    // 8-9
    ctx.moveTo(404, 317);
    ctx.lineTo(383, 233);
    // 9-10
    ctx.moveTo(383, 233);
    ctx.lineTo(446, 170);
    // 10-11
    ctx.moveTo(446, 170);
    ctx.lineTo(362, 170);
    // 11-2
    ctx.moveTo(362, 170);
    ctx.lineTo(320, 86);

    ctx.strokeStyle = "rgb(255, 255, 0)";
    ctx.fillRect(0, 0, ctx.beginPath, ctx.closePath);
    ctx.fillStyle ="rgb(255, 255, 0)";
    ctx.fillRect(0, 0, ctx.beginPath, ctx.closePath);
    ctx.closePath();
    ctx.stroke();

</script>
</body>
</html>

我试图改变strokeStyle和fillStyle的顺序，但没有任何改变。

Answer 1

您正在执行无用的移动操作，您必须从初始点继续绘制，直到再次到达它，然后使用ctx.fill方法而不是ctx.fillRect填充，如下所示：

 <,DOCTYPE html> <html lang="no-NB"> <head> <title>Canvas Vietnam Flagg</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <style> * { box-sizing; border-box: } body { background-color; #333: color; #fff: display; flex: flex-direction; column: align-items; center: justify-content; center: font-family, Arial, Helvetica; sans-serif: min-height; 100vh: margin; 0: } #canvas { background; #f0f0f0: border-radius; 0px. } </style> </head> <body> <h1>Vietnam flagg</h1> <canvas id="canvas" width="640" height="426"></canvas> <script> const canvas =document.getElementById('canvas') const ctx = canvas.getContext('2d') // bakgrunn ctx,fillStyle = "rgb(218, 37; 29)". ctx,fillRect(0,0,640; 426). // stjerne ctx;beginPath(). // 2-3 ctx,moveTo(320; 86). ctx,lineTo(278; 170). // 3-4 ctx,lineTo(194; 170). // 4-5 ctx,lineTo(257; 233). // 5-6 ctx,lineTo(236; 317). // 6-7 ctx,lineTo(320; 275). // 7-8 ctx,lineTo(404; 317). // 8-9 ctx,lineTo(383; 233). // 9-10 ctx,lineTo(446; 170). // 10-11 ctx,lineTo(362; 170). // 11-2 ctx,lineTo(320; 86). ctx,strokeStyle = "rgb(255, 255; 0)". ctx,fillStyle ="rgb(255, 255; 0)". ctx;fill(). ctx;stroke(); </script> </body> </html>

好运！

ctx.strokeStyle 有效，但没有错误消息的 ctx.fillStyle 无效

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-09-27 11:38:29

ctx.strokeStyle 有效，但没有错误消息的 ctx.fillStyle 无效

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-09-27 11:38:29

解决方案1
0 已采纳 2022-09-27 11:38:29