Question

我今天的问题是问为什么当我切换单选按钮，画一个圆圈并画一个正方形时不能正常工作。这是我的油漆程序即时创建。请帮我解决这个问题。你也可以帮助为什么这个程序如此滞后？ XD。代码在这里：

＆＃13;

var square = true

function myFunction() {
  var x = document.getElementById("myColor").value;
  ctx.fillStyle = x;
};

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;
$('#colorForm input').on('change', function() {
  ctx.fillStyle = $(this).val();
});

$('#sizeForm input').on('change', function() {
  size = $(this).val();
});

function drawRect(event) {
  var posX = event.pageX - $("#canvas").offset().left - 4
  var posY = event.pageY - $("#canvas").offset().top - 4
  ctx.fillRect(posX, posY, size, size)
}

function drawCircle(event) {
  var posX = event.pageX - $("#canvas").offset().left
  var posY = event.pageY - $("#canvas").offset().top
  ctx.beginPath();
  ctx.arc(posX, posY, size - 1, 0, Math.PI / 2, false);
  ctx.closePath();
  ctx.fill();
}

function check() {
  if (square === true) {
    $("html").mousedown(function() {
      $("html").mousemove(function(event) {
        drawRect(event);
      })
      $("html").click(function(event) {
        drawRect(event);
      })
    })

    $("html").mouseup(function() {
      $("html").off("mousemove")
    })
  }
  if (square === false) {
    $("html").mousedown(function() {
      $("html").mousemove(function(event) {
        drawCircle(event);
      })
      $("html").click(function(event) {
        drawCircle(event);
      })
    })

    $("html").mouseup(function() {
      $("html").off("mousemove")
    })
  }
}

function clearCanvas() {
  if (confirm("Are you sure you want to clear your drawing?") == true) {
    ctx.clearRect(0, 0, 800, 800)
  }
}

setInterval(function() {
  check();
}, 1)

＆＃13;

#canvas {
  border: 1px solid black
}

＆＃13;

<p id="demo"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="800" height="800" style="cursor:crosshair"></canvas>
<br />
<STRONG>Choose your drawing shape</STRONG>:
<input type="radio" name="shape" onclick="square = true" checked="checked">Square
<input type="radio" name="shape" onclick="square = false">Circle
<br />
<STRONG>Color Settings</STRONG>:
<input type="color" id="myColor">
<button onclick="myFunction()">OK</button>
<br />Basic Colours:
<br />
<form id="colorForm">
  <input type="radio" name="color" value="black" checked="checked">Black
  <input type="radio" name="color" value="red">Red
  <input type="radio" name="color" value="orange">Orange
  <input type="radio" name="color" value="yellow">Yellow
  <input type="radio" name="color" value="green">Green
  <input type="radio" name="color" value="blue">Blue
  <input type="radio" name="color" value="purple">Purple
  <input type="radio" name="color" value="white">Eraser (White)
</form>
<form id="sizeForm">
  <br />
  <STRONG>Size</STRONG>:
  <input type="radio" name="size" value="10">Big
  <input type="radio" name="size" value="5" checked="checked">Normal
  <input type="radio" name="size" value="2">Small
</form>
<br />
<button onclick="clearCanvas()">Clear Drawing</button>

＆＃13;

Answer 1

.arc()取弧度 - 2π是一个完整的圆，你做π/ 2是90度。这是一个简单的转换器：http://www.rapidtables.com/convert/number/radians-to-degrees.htm。

我调整了下面的代码，你没有清理onmousedown监听器。 click监听器实际上是不必要的，如果使用mouseup代替（因为你已经mousedown，你已经有了一半的点击）。 setInterval是不必要的;你可以听mousedown开始画画。将侦听器的范围限制在画布与所有HTML之间也可以提高性能。

var square = true; // Set

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;

$('#colorForm input, #myColor').on('change', function() {
  ctx.fillStyle = $(this).val();
});

$('#sizeForm input').on('change', function() {
  size = $(this).val();
});


function drawRect(event) {
  var posX = event.pageX - $(canvas).offset().left - 4
  var posY = event.pageY - $(canvas).offset().top - 4
  ctx.fillRect(posX, posY, size, size)
}

function drawCircle(event) {
  var posX = event.pageX - $(canvas).offset().left
  var posY = event.pageY - $(canvas).offset().top
  ctx.beginPath();
  ctx.arc(posX, posY, size - 1, 0, Math.PI * 2, false);
  ctx.closePath();
  ctx.fill();
}

function mouseDown(e) {
  // We only care about mousemove on the canvas, not the whole page
  if (square) {
    $(canvas).on('mousemove', drawRect).on('mouseup', drawRect);
  } else {
    $(canvas).on('mousemove', drawCircle).on('mouseup', drawCircle);
  }

  // If the user mouseup outside of the canvas, we don't want to keep listening, so listen for mouseup on the whole page to remove our other drawing listeners
  $('html').one('mouseup', function() { // "one" means that it will only fire once and will stop listening after that (cleanup for free)
    $(canvas).off('mousemove').off('mouseup');
  });
}

function clearCanvas() {
  if (confirm("Are you sure you want to clear your drawing?") == true) {
    ctx.clearRect(0, 0, 800, 800)
  }
}

// We only care about mousedown on the canvas, not the whole page
$(canvas).on('mousedown', mouseDown);

#canvas {
  border: 1px solid black;
  cursor: crosshair;
}
h2,
h3 {
  margin-bottom: 0;
}
h2 {
  font-size: 1.1rem;
}
h3 {
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="canvas" width="300" height="200"></canvas>

<h2>Choose your drawing shape:</h2>
<p>
  <input type="radio" name="shape" onclick="square=true;" checked="checked">Square
  <input type="radio" name="shape" onclick="square=false;">Circle
</p>

<h2>Color Settings:</h2>

<input type="color" id="myColor" />

<form id="colorForm">
  <h3>Basic Colours:</h3>
  <p>
    <input type="radio" name="color" value="black" checked="checked" />Black
    <input type="radio" name="color" value="red" />Red
    <input type="radio" name="color" value="orange" />Orange
    <input type="radio" name="color" value="yellow" />Yellow
    <input type="radio" name="color" value="green" />Green
    <input type="radio" name="color" value="blue" />Blue
    <input type="radio" name="color" value="purple" />Purple
    <input type="radio" name="color" value="white" />Eraser (White)
  </p>
</form>


<form id="sizeForm">
  <h2>Size:</h2>
  <p>
    <input type="radio" name="size" value="10" />Big
    <input type="radio" name="size" value="5" checked="checked" />Normal
    <input type="radio" name="size" value="2" />Small
  </p>
</form>

<br />
<button onclick="clearCanvas()">Clear Drawing</button>

Answer 2

首先，你的代码在行尾没有大量的分号，这在一般情况下是非常糟糕的做法。我会说你的第一个行动是填补这些，以确保缺少的冒号导致问题。

其次，当您更改方形变量时，首先要分配 onmousedown 处理程序以使用 drawRect 方法。但是，当您选择circle并且square变为false时，您将分配 onmousedown 处理程序以使用 drawCircle 方法而不解除之前的 onmousedown 处理程序的绑定。使用jQuery，再次分配处理程序不会覆盖以前的处理程序。

我看到的另一个问题是，首先没有正确绘制圆圈。如果您最初设置 square = false 并尝试绘制一个圆圈，则只绘制一个半圆，因此请检查您的drawCircle。

绘制圆形和正方形与单选按钮不工作

2 个答案: