我想在javascript中画一个圆圈答案

【问题标题】：I wanted to draw a circle in javascript我想在javascript中画一个圆圈
【发布时间】：2019-01-24 14:28:54
【问题描述】：

我正在用 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();

我要同一个程序做一个小圆圈

【问题讨论】：

这里已经有人这样做了：codepen.io/dzsobacsi/pen/pjxEOK 但是为了清楚起见，我认为您正在尝试绘制一个“死”。骰子是死的复数。最后，我建议您使用图像而不是尝试自己绘制它们，但我知道您只是在尝试学习，所以...开始吧！
在写问题时，您应该发布一个可以执行的代码的最小、完整示例。并解释你到底在哪里有问题。否则，不清楚您的问题是因为ctx 未初始化而导致代码根本没有运行，还是其他问题。

标签： javascript html javascript-objects

【解决方案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();

【讨论】：

【解决方案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>

【讨论】：