Question

我有一座城堡，但我不知道如何通过特定的颜色填充该区域（城堡）。我尝试过fillstyle，但它没有工作，也许我做得不对，或者它可能需要我不使用的其他东西。如果您还需要其他东西，请不要犹豫。我把这个片段用来帮助你们理解这个问题。

＆＃13;

function main() {
  var c2d = document.getElementById("acanvas").getContext("2d");
  c2d.fillStyle = "blue";
  castelo(c2d);
}

function castelo(c2d) { //30 para o lado de baixo
  //40 para o lado de cima
  //20 para baixo
  c2d.fillStyle = "red";
  c2d.beginPath();
  c2d.strokeStyle = 'blue';
  c2d.moveTo(20, 20);
  c2d.lineTo(50, 20);
  c2d.stroke();
  c2d.moveTo(50, 20);
  c2d.lineTo(50, 40);
  c2d.stroke();
  c2d.moveTo(50, 40);
  c2d.lineTo(80, 40);
  c2d.stroke();
  c2d.moveTo(80, 40);
  c2d.lineTo(80, 20);
  c2d.stroke();
  c2d.moveTo(80, 20);
  c2d.lineTo(120, 20);
  c2d.stroke();
  c2d.moveTo(120, 20);
  c2d.lineTo(120, 40);
  c2d.stroke();
  c2d.moveTo(120, 40);
  c2d.lineTo(150, 40);
  c2d.stroke();
  c2d.moveTo(150, 40);
  c2d.lineTo(150, 20);
  c2d.stroke();
  c2d.moveTo(150, 20);
  c2d.lineTo(190, 20);
  c2d.stroke();
  c2d.moveTo(190, 20);
  c2d.lineTo(190, 40);
  c2d.stroke();
  c2d.moveTo(190, 40);
  c2d.lineTo(220, 40);
  c2d.stroke();
  c2d.moveTo(220, 40);
  c2d.lineTo(220, 20);
  c2d.stroke();
  c2d.moveTo(220, 20);
  c2d.lineTo(260, 20);
  c2d.stroke();
  c2d.moveTo(260, 20);
  c2d.lineTo(260, 40);
  c2d.stroke();
  c2d.moveTo(260, 40);
  c2d.lineTo(290, 40);
  c2d.stroke();
  c2d.moveTo(290, 40);
  c2d.lineTo(290, 20);
  c2d.stroke();
  c2d.moveTo(290, 20);
  c2d.lineTo(320, 20);
  c2d.stroke();
  c2d.moveTo(320, 20); //final do castelo em cima
  c2d.lineTo(320, 500);
  c2d.stroke();
  c2d.moveTo(320, 500);
  c2d.lineTo(170, 300);
  c2d.stroke();
  c2d.moveTo(170, 300);
  c2d.lineTo(20, 500);
  c2d.stroke();
  c2d.moveTo(20, 500);
  c2d.lineTo(20, 20);
  c2d.stroke();
  c2d.closePath();
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="capadolivro.js">
  </script>
</head>

<body onload="main();">
  <canvas id="acanvas" width="1366" height="768" />
</body>

</html>

＆＃13;

Answer 1

我认为这就是你想要的。我修改了一些使代码工作的东西。

我改变了画布的大小，以便它更适合我的窗口（你可能有理由在你的网站上这么大）
我在调用时从你的castelo（）函数中删除了参数，因为它不需要
你不需要做一个新的动作在每个线段后，画布会记住它的最后位置，所以你可以直接到下一个点，这个改变使你的代码减少了33％

var c2d = document.getElementById("acanvas").getContext("2d");
if (c2d) {
  castelo()
}

function castelo() { //30 para o lado de baixo
//40 para o lado de cima
//20 para baixo
    c2d.fillStyle= "red";	 
    c2d.strokeStyle = "blue";
		c2d.beginPath();
    c2d.moveTo(20,20);
    c2d.lineTo(50,20);
    c2d.lineTo(50,40);
    c2d.lineTo(80,40);
    c2d.lineTo(80,20);
    c2d.lineTo(120,20);
    c2d.lineTo(120,40);
    c2d.lineTo(150,40);
    c2d.lineTo(150,20);
    c2d.lineTo(190,20);
    c2d.lineTo(190,40);
    c2d.lineTo(220,40);
    c2d.lineTo(220,20);
    c2d.lineTo(260,20);
    c2d.lineTo(260,40);
    c2d.lineTo(290,40);
    c2d.lineTo(290,20);
    c2d.lineTo(320,20);  //final do castelo em cima
		c2d.lineTo(320,500);
		c2d.lineTo(170,300);
		c2d.lineTo(20,500);
    c2d.closePath();
		c2d.stroke();
		c2d.fill();
}

<canvas id="acanvas" width="600" height="600" />

Answer 2

您不必每次moveTo。就像这样：

function main() {
    var c2d = document.getElementById("acanvas").getContext("2d");

    castelo(c2d);
}

function castelo(c2d) { 
	  c2d.beginPath();
    c2d.moveTo(20, 20);
    c2d.lineTo(50,20);
    c2d.lineTo(50,40);
    c2d.lineTo(80,40);
    c2d.lineTo(80,20);
    c2d.lineTo(120,20);
    c2d.lineTo(120,40);
    c2d.lineTo(150,40);
    c2d.lineTo(150,20);
    c2d.lineTo(190,20);
    c2d.lineTo(190,40);   
    c2d.lineTo(220,40);
    c2d.lineTo(220,20);
    c2d.lineTo(260,20);
    c2d.lineTo(260,40);
    c2d.lineTo(290,40);
    c2d.lineTo(290,20);
    c2d.lineTo(320,20);
    c2d.lineTo(320,500);
    c2d.lineTo(170,300);
    c2d.lineTo(20,500);
    c2d.lineTo(20,20);
    c2d.stroke();
    c2d.fillStyle = "red";
    // do not forget about fill(). It also does closePath() for you.
    c2d.fill();  
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="capadolivro.js">
        </script>
    </head>
    <body onload="main();">
        <canvas id="acanvas" width="1366" height="768" />
    </body>
</html>

Answer 3

您需要c2d.fill() - 设置填充样式是不够的。但更重要的是，在你的城堡的完整轮廓被确定为当前路径之后，你必须做fill()。

您将无法在当前代码的末尾粘贴c2d.fill()，因为这可能会填满您之前描述过的所有行。

您需要做的是重新排列您的绘图代码以完成城堡的轮廓，然后填充然后填充笔划，然后创建并描绘您要添加的任何内部细节线。

如何在特定区域填充颜色？

3 个答案: