Question

我正在用Javascript做骰子游戏。

有人告诉我将该问题分解为多个功能，并为每个功能创建每个应用程序。

因此，我现在将整个骰子游戏分解为各种功能，例如绘制圆圈等。

因此，我喜欢创建一个圆圈（骰子上的圆点），为此；我使用了最初的源代码，并保留了有用的代码，这些代码可以帮助我画出一条弧线，但是那没用。谁能找出原因？

我想我错过了一些要传递给函数的值，但是我不知道这是不是问题所在？

我试图在draw1（）内部传递值，但这不起作用

var cwidth = 400;
var cheight = 300;
var dicex = 50;
var dicey = 50;
var dicewidth = 100;
var diceheight = 100;
var dotrad = 6;
var ctx;

function init() {
  draw1();
}

function draw1() {
  var dotx;
  var doty;
  ctx.beginPath();
  dotx = dicex + 0.5 * dicewidth;
  doty = dicey + 0.5 * diceheight;
  ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

  ctx.closePath();
  ctx.fill();
}

init();

我希望同一程序绕一个小圈

Answer 1

您的初始代码有一些问题，主要是由于变量未定义。声明变量时，只有给它赋值才定义它。这意味着代码如下：

var ctx;

创建一个名为ctx的变量，但其值为undefined。这意味着当您尝试执行

之类的操作时

ctx.beginPath();

您会收到错误消息，因为undefined没有属性beginPath。

要解决此问题，需要做的是在声明变量时初始化它们。实际上，在不初始化变量的情况下定义变量几乎不是一个好主意。

我在这里添加了一个创建画布的函数，然后您可以使用该画布对象初始化ctx变量。这可能是这样的：

var cwidth = 400;
var cheight = 300;
var dicex = 50;
var dicey = 50;
var dicewidth = 100;
var diceheight = 100;
var dotrad = 6;

function init() {
  draw1();
}

function addCanvas(width, height) {
  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  document.body.appendChild(canvas);
  return canvas;
}

function draw1() {
  var dotx;
  var doty;
  var canvas = addCanvas(cwidth, cheight)
  var ctx = canvas.getContext("2d");

  ctx.beginPath();
  dotx = dicex + 0.5 * dicewidth;
  doty = dicey + 0.5 * diceheight;
  ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

  ctx.closePath();
  ctx.fill();
}

init();

Answer 2

<html>
  <head>
    <title>die</title>
  </head>
  <body onLoad="draw1()">
    <canvas id="canvas"width="400"height="300" style="border:1px solid #000000;">
      nope unsp browser
    </canvas>
    <script>
      var cwidth = 400;
      var cheight = 300;
      var dicex = 50;
      var dicey = 50;
      var dicewidth = 100;
      var diceheight = 100;
      var dotrad = 6;
      var c = document.getElementById('canvas');
      var ctx = c.getContext('2d');;
          function draw1() {
          var dotx;
          var doty;
          ctx.beginPath();
          dotx = dicex + 0.5 * dicewidth;
          doty = dicey + 0.5 * diceheight;
          ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);
          ctx.fill();
          ctx.stroke();
          ctx.closePath();
      }
    </script>
  </body>
</html>

我想用JavaScript画一个圆

2 个答案: