Question

所以基本上javascript绘制了两个三角形，一个带有蓝色边框，第二个带有绿色边框。我有一个按钮，按下它时应该用蓝色边框蓝色填充三角形。

目前它不起作用，但当从底部的if语句中删除{}时，它会将绿色边框三角形颜色为绿色，我不知道为什么会发生这种情况。

任何提示都会非常有用！

＆＃13;

window.onload = draw;

function draw() {
  var canvas = document.getElementById('myCanvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();

    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.moveTo(600, 0);
    ctx.lineTo(500, 200);
    ctx.lineTo(700, 200);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = "green";
    ctx.moveTo(500, 210);
    ctx.lineTo(700, 210);
    ctx.lineTo(600, 410);
    ctx.closePath();
    ctx.stroke();

  }
}

function fillColor() {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  if (ctx.strokeStyle == "blue") {
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.fill();
  }
}

＆＃13;

<canvas id="myCanvas" width="700" height="410"></canvas>

＆＃13;

Answer 1

您无法将矩形与笔触颜色进行比较。您需要稍微更改fillColor函数。请参阅以下代码，它可能会对您有所帮助

HTML

<body>
 <canvas id="myCanvas" width="700" height="410"></canvas>
</body>

的Javascript

<script>
window.onload = draw;

function draw() {
 var canvas = document.getElementById('myCanvas');
 if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  ctx.beginPath();

  ctx.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(600, 0);
  ctx.lineTo(500, 200);
  ctx.lineTo(700, 200);
  ctx.closePath();
  ctx.stroke();
  fillColor(ctx,'blue');
  ctx.beginPath();
  ctx.strokeStyle = "green";
  ctx.moveTo(500, 210);
  ctx.lineTo(700, 210);
  ctx.lineTo(600, 410);
  ctx.closePath();
  fillColor(ctx,'red');
 }
}

function fillColor(ctx,color) {
   ctx.fillStyle = color;
   ctx.fill();
}

在创建每个要填充颜色的矩形后，需要调用fillColor（）函数。

javascript使用按钮填充画布对象

1 个答案: