html5 - HTML5 Canvas -绘制

下面列出了圆圈示例
这是我的JavaScript代码。

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

最佳答案

假设您的randomColor是正确的，那么您只需要：
从画布中移除context.clearRect。单击
将context.beginPath移到画布上
这是一个工作样品

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>