HTML5 Canvas - 绘制

Question

下面列出了圆形的例子

这是我的 JavaScript 代码。

<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>

Answer 1

假设您的 randomColor 是正确的，您只需要:

• 从 canvas.onclick 中移除 context.clearRect
• 将 context.beginPath 移动到 canvas.onclick

这是一个工作示例

var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");

function randomColor() {
  colorArray = ["red", "blue", "green", "lime", "orange", "cyan"]
  return colorArray[Math.floor(Math.random() * colorArray.length)];
}


// click event handler
canvas.onclick = function(e) {
  x = e.clientX - e.target.offsetLeft;
  y = e.clientY - e.target.offsetTop;

  context.beginPath();
  context.fillStyle = randomColor();
  context.arc(x, y, 25, 0, 2 * Math.PI, true);
  context.fill();
}

<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>