鼠标点击在画布上绘制一个随机颜色的圆圈答案

【问题标题】：Drawing a circle with random color in canvas on mouse click鼠标点击在画布上绘制一个随机颜色的圆圈
【发布时间】：2017-09-30 00:17:41
【问题描述】：

我正在尝试使用 html5 和 javascript 开发一个简单的画布应用程序。我想根据鼠标在画布中单击的位置制作一个圆圈。每次用户在画布中单击时，都应绘制一个圆圈。此外，圆圈的颜色需要随机选择。我已经编写了随机颜色和位置函数来获取鼠标在画布中的 x 和 y 位置。但是当我运行时什么都没有发生。

这是我的html代码：

   <!DOCTYPE html>
 <html lang="en">
<head>
    <meta charset="utf-8">
    <script src="circle.js"></script>
  <style type="text/css">

 #testCanvas {
       border: 2px solid;
 }
</style>  

</head>
<body>

     <canvas id="testCanvas" width="400" height="400"> </canvas>

</body>

这是我的 javascript 代码：

window.onload = init;

function init() {
// access the canvas element and its context
 var canvas = document.getElementById("testCanvas");
 var context = canvas.getContext("2d");

var pos = getMousePos(canvas, e);
posx = pos.x;
posy = pos.y;
context.fillStyle = randomColor();

// fill a circle
context.beginPath();
context.arc(posx,posy, 30, 0, 2 * Math.PI, true);
context.fill();
context.closePath();

 }

 function randomColor() {
    var color = [];
    for (var i = 0; i < 3; i++) {
     color.push(Math.floor(Math.random() * 256));
    }
    return 'rgb(' + color.join(',') + ')';
   }

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
   x: evt.clientX - rect.left,
   y: evt.clientY - rect.top
 };
}

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您需要为画布实现一个单击处理程序，以便每次单击它时都会收到事件形式的通知：

// access the canvas element and its context
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");

// add click handler
canvas.onclick = function(e) {
  var pos = getMousePos(canvas, e);     // get position as before
  context.fillStyle = randomColor();    // get the fill color

  // fill a circle
  context.beginPath();                  // now we can draw the circle at click
  context.arc(pos.x, pos.y, 30, 0, 2 * Math.PI); // use pos object directly like this
  context.fill();
  // closePath() not needed here and won't work after fill() has been called anyways
}

function randomColor() {
  var color = [];
  for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
  }
  return 'rgb(' + color.join(',') + ')';
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

canvas {border: 1px solid #999}

&lt;canvas id="testCanvas" width="400" height="400"&gt; &lt;/canvas&gt;

【讨论】：

我需要把事件处理程序写在最开始调用的init()或draw()方法中吗？
@Rahila 可以在 init() 函数中添加处理程序（我看不到任何 draw() 方法，但也许 init 是你的意思？）
是的初始化方法。因为如果我在不添加 init() 方法的情况下运行它不会显示任何内容，这意味着我需要调用 js 的特定函数。对吗？
你能告诉我如何隐藏重叠的圆圈吗？就像用户点击两个相邻的点一样，新的圆圈应该隐藏之前的圆圈？
@Rahila 会复杂得多，并且超出了这个问题的范围。您必须跟踪例如数组中的所有点击，然后重绘，然后实施物流/命中测试以了解何时应该删除一个圆圈等等。

【解决方案2】：

这是添加事件处理程序的另一个示例/方式。您可以将 'click' 更改为 'mousemove' 和其他人来尝试不同的事情。

// access the canvas element and its context
window.onload = init;

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

  function drawCircle(pos,canvas){
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = randomColor();

  // fill a circle
    context.beginPath();
    context.arc(posx,posy, 30, 0, 2 * Math.PI, true);
    context.fill();
    context.closePath();

  }

  function randomColor() {
   var color = [];
   for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
   }
   return 'rgb(' + color.join(',') + ')';
  }

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
    } ;
  }

  canvas.addEventListener('click', function(evt){
    var mousePos = getMousePos(canvas,evt);
    drawCircle(mousePos,canvas);
  },false);
}

【讨论】：