Question

我正在尝试制作随机出现的squ and和矩形画布，它们的数量是用户的选择。在输入它们的数量之后，按一个按钮 - 它应该出现在画布上。在我的代码中它没有发生，我不明白为什么！让我在这疯狂。我显然在这里遗漏了一些东西，我想这是一件非常愚蠢的事情。

function draw() {
  var drawing = document.getElementById("canvas");
  var context = drawing.getContext("2d");
  saveImage();
}


//save the user input to use it later 
var numOfRect = parseInt(document.getElementById("inSquer").value);
var numOfCirc = parseInt(document.getElementById("inCircle").value);


//This function will draw on the canvas
function paint(numOfRect, numOfCirc) {
  for (var makeIt = 0; makeIt < numOfRect; makeIt++) {
    makeRect(drawing, context);
    makeCircle(drawing, context);
  }
}


//This function draw the circles
function makeCircle(drawing, context) {
  var radius = Math.floor(Math.random() * 80);
  var x = Math.floor(Math.random() * canvas.width);
  var y = Math.floor(Math.random() * canvas.height);

  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI);
  context.fillStyle = "blue";
  context.fill();
}


//This function draw the squers
function makeRect(drawing, context) {

  var w = Math.floor(Math.random() * 50);

  var x = Math.floor(Math.random() * canvas.width);
  var y = Math.floor(Math.random() * canvas.height);
  context.fillStyle = "yellow";
  context.fillRect(x, y, w, w);
}

//function to save the canvas as an image
function saveImage() {
  var canvas = document.getElementById("canvas");
  canvas.onclick = function() {
    window.location = canvas.toDataURL("image/png");
  };
}

#canvas {
  margin-left: 150px;
  border: 1px solid black;
}

<html>

<head>
  <script src="js.js">
  </script>
  <link href="design.css" rel="stylesheet" />
</head>

<body onload="draw()">

  <canvas id="canvas" width="1200" height="750"></canvas>
  </br>
  </br>
  <span>
    How many Circles do you want?
    <input id="inCircle"></input>
    </span>
  </br>
  How many Squers do you want?
  <input id="inSquer"></input>
  </br>

  <button id="creat" onclick="paint()">Creat My Work</button>

</body>

</html>

Answer 1

paint(numOfRect, numOfCirc)需要2个参数，但<button id="creat" onclick="paint()">Creat My Work</button>没有给出任何参数。

另外

var numOfRect = parseInt(document.getElementById("inSquer").value);
var numOfCirc = parseInt(document.getElementById("inCircle").value);

并没有做任何事情，因为当代码运行时值为空。

尝试更改绘画功能，如下所示：

function paint() 
{

    var numOfRect = parseInt(document.getElementById("inSquer").value);
    var numOfCirc = parseInt(document.getElementById("inCircle").value);

    for (var makeIt = 0; makeIt < numOfRect; makeIt++) 
    {
        makeRect(drawing, context);
        makeCircle(drawing, context);
    }
}

Answer 2

请考虑以下代码段。

首先，您的paint()函数缺少两个参数。除此之外，我建议在脚本之上定义所有变量，以便更容易跟踪。

我在代码中添加了一些注释以突出显示更改。

此外，我删除了一些冗余的DOM交互。

// Wait for DOM to be loaded.
document.addEventListener("DOMContentLoaded", function(event) {
  
  // Keep references to elements, so we could interact with them later.
  var drawing = document.getElementById("canvas");
  var context = drawing.getContext("2d");
  var inSquer = document.getElementById("inSquer");
  var inCircle = document.getElementById("inCircle");
  var button = document.getElementById("creat");

  // Attach event listeners to the button and canvas element.
  button.addEventListener("click", function() {

    // Retrieve values from input fields every time you click.
    paint(parseInt(inSquer.value), parseInt(inCircle.value));
  });

  drawing.addEventListener("click", function() {
    saveImage();
  });

  // Function to save the canvas as an image.
  function saveImage() {
    window.location = drawing.toDataURL("image/png");
  }

  // This function will draw on the canvas.
  function paint(numOfRect, numOfCirc) {

    for (var makeIt = 0; makeIt < numOfRect; makeIt++) {
      makeRect(drawing, context);
      makeCircle(drawing, context);
    }
  }

  // This function draw the circles.
  function makeCircle(drawing, context) {

    var radius = Math.floor(Math.random() * 80);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);

    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.fillStyle = "blue";
    context.fill();
  }

  // This function draw the squers.
  function makeRect(drawing, context) {

    var w = Math.floor(Math.random() * 50);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);

    context.fillStyle = "yellow";
    context.fillRect(x, y, w, w);
  }
});

#canvas {
  margin-left: 150px;
  border: 1px solid black;
}

<html>

<head>
</head>

<body>
  <canvas id="canvas" width="1200" height="750"></canvas>
  <br/>
  <br/>
  <span>
    How many Circles do you want?
    <input id="inCircle" />
    </span>
  <br/>How many Squers do you want?
  <input id="inSquer" />
  <br/>
  <button id="creat">Creat My Work</button>
</body>

</html>

在javascript中不会在画布上绘图

2 个答案: