Я хотел нарисовать круг в JavaScript - PullRequest
Новая
       17

Я хотел нарисовать круг в JavaScript

0 голосов
/ 24 января 2019

Я делал игру в кости в 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();

Я хочу, чтобы эта же программа сделала маленький круг

Ответы [ 2 ]

0 голосов
/ 24 января 2019 

<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>
0 голосов
/ 24 января 2019

У вас было несколько проблем с исходным кодом, в основном из-за неопределенности переменных.Когда вы объявляете переменную, она определяется, только если вы даете ей значение.Это означает, что код, такой как: 

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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...