Question

我遇到问题。我在圆形路径中画了一些圆圈，我希望什么时候点击它们在firebug控制台中返回0以外的东西但是没有发生; 我不知道我的代码有什么问题，我希望有人能告诉我。这是我的代码：

  var canvas, ctx;
  var circle_data = [];

  function circles(x, y, radius) {
      this.x = x;
      this.y = y;
      this.radius = radius;
      circle_data.push(this);
  }
  circles.prototype = {
      draw: function (context) {
          context.beginPath();
          context.arc(this.x, this.y, this.radius / 5, 0, 2 * Math.PI, false);
          context.fillStyle = "red";
          context.fill();
      }
  }
  function draw() {
      ctx.translate(250, 250);
      for (var n = 0; n < 10; n++) {
          var radi = (Math.PI / 180);
          var x = Math.sin(radi * n * 36) * 70;
          var y = Math.cos(radi * n * 36) * 70;
          var radius = 50;
          var thiscircle = new circles(x, y, radius);
          thiscircle.draw(ctx);
      }
  }
  function mouseDown(e) {
      var img_data = ctx.getImageData(e.pageX, e.pageY, 1, 1);
      console.log(img_data.data[3]);
  }

  function init() {
      canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');
      canvas.addEventListener('mousedown', mouseDown, false);
  }

init（）;

我使用数据并不重要[3]; 我试过whit console.log（img_data.data [0] +“”+ img_data.data [1] +“”+ img_data.data [2]）; 仍然得到0 0 0

Answer 1

您检测相对于页面而不是画布的鼠标位置，您需要获取画布在页面上的位置，并从鼠标的X和Y中减去该位置，以找到相对于画布的位置。在使用canvas时，我使用与下面类似的函数。

getOffsetPosition = function(obj){
            /*obj is the Canvas element*/ 
        var offsetX = offsetY = 0;

        if (obj.offsetParent) {
            do {
                offsetX += obj.offsetLeft;
                offsetY += obj.offsetTop;
            }while(obj = obj.offsetParent);
        }   
        return [offsetX,offsetY];
    }

getMouse = function(e,canvasElement){
        OFFSET = getOffsetPosition(canvasElement);

        mouse_x = (e.pageX || (e.clientX + document.body.scrollLeft +  document.documentElement.scrollLeft)) - OFFSET[0];
        mouse_y = (e.pageY || (e.clientY + document.body.scrollTop + document.documentElement.scrollTop)) - OFFSET[1];  

        return [mouse_x,mouse_y];
    }

以下代码有效。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<canvas id="canvas" width="500" height="500" style="background-color:#999999;"></canvas>
</body>
<script>
var canvas,ctx;

var circle_data = [];
function circles(x,y,radius)
{
this.x = x;
this.y = y;
this.radius = radius;
circle_data.push(this);

}


circles.prototype = {

draw: function(context){





context.beginPath();
context.arc(this.x, this.y, this.radius / 5, 0, 2* Math.PI, false);
context.fillStyle = "red";
context.fill();



}
}

getOffsetPosition = function(obj){
/*obj is the Canvas element*/ 
var offsetX = offsetY = 0;

if (obj.offsetParent) {
do {
offsetX += obj.offsetLeft;
offsetY += obj.offsetTop;
}while(obj = obj.offsetParent);
}   
return [offsetX,offsetY];
}

getMouse = function(e,canvasElement){
OFFSET = getOffsetPosition(canvasElement);

mouse_x = (e.pageX || (e.clientX + document.body.scrollLeft +  document.documentElement.scrollLeft)) - OFFSET[0];
mouse_y = (e.pageY || (e.clientY + document.body.scrollTop + document.documentElement.scrollTop)) - OFFSET[1];  

return [mouse_x,mouse_y];
}



function draw(){


ctx.translate(250, 250);
for (var n = 0; n < 10; n++) {
var radi = (Math.PI/180);
var x = Math.sin(radi*n*36)*70;
var y = Math.cos(radi*n*36)*70;
var radius = 50;
var thiscircle = new circles(x,y,radius);
thiscircle.draw(ctx);
}



}


function mouseDown(e)
{

var pos = getMouse(e,ctx.canvas);
var img_data = ctx.getImageData(pos[0],pos[1],1,1);

console.log(img_data.data[3]);

}

function init() {

canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
draw();



canvas.addEventListener('mousedown', mouseDown, false);

}

init();

</script>
</html>

单击Html5画布图像

init（）;

1 个答案: