我的代码没问题。
我在圆形路径上画了一些圆,我期望何时在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);
  }


      在里面();

我使用data [3]没关系;
我尝试了白色的console.log(img_data.data [0] +“” + img_data.data [1] +“” + img_data.data [2]);
仍然得到0 0 0

最佳答案

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

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>

关于javascript - 单击HTML5 Canvas 图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11937862/

10-09 08:15
查看更多