Question

我正在尝试使用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
 };
}

Answer 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}

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

Answer 2

这是添加事件处理程序的另一个示例/方法。您可以更改“点击”＃39;到了'mousemove＆＃39;和其他人尝试不同的事情。

// 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);
}

在鼠标单击时在画布中绘制一个随机颜色的圆圈

2 个答案: