Javascript 点击Html5画布图像_Javascript_Html_Canvas

Javascript 点击Html5画布图像

javascript html canvas

Javascript 点击Html5画布图像,javascript,html,canvas,Javascript,Html,Canvas,我的代码有问题。我在一个圆形路径中画了一些圆，我希望在firebug控制台中单击它们时返回除0以外的其他内容，但这并没有发生；我不知道我的代码有什么问题，我希望有人会告诉我。这是我的密码： var canvas, ctx; var circle_data = []; function circles(x, y, radius) { this.x = x; this.y = y; this.radius = radius; cir

我的代码有问题。我在一个圆形路径中画了一些圆，我希望在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);
  }

var画布，ctx；
var circle_数据=[]；
函数圆（x、y、半径）{
这个.x=x；
这个。y=y；
这个半径=半径；
圈出数据。推送（此）；
}
圆圈。原型={
绘制：函数（上下文）{
context.beginPath（）；
弧（this.x，this.y，this.radius/5,0,2*Math.PI，false）；
context.fillStyle=“红色”；
context.fill（）；
}
}
函数绘图（）{
翻译（250250）；
对于（变量n=0；n<10；n++）{
var radi=（数学PI/180）；
var x=数学sin（半径*n*36）*70；
变量y=数学cos（半径*n*36）*70；
var半径=50；
var thiscircle=新的圆（x，y，半径）；
这个圆。画（ctx）；
}
}
功能鼠标向下（e）{
var img_data=ctx.getImageData（e.pageX，e.pageY，1,1）；
日志（img_data.data[3]）；
}
函数init（）{
canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'）；
canvas.addEventListener（'mousedown'，mousedown，false）；
}

init（）；不要紧的是我使用数据[3]；我尝试使用console.log（img_data.data[0]+“”+img_data.data[1]+“”+img_data.data[2]）；

仍然获得0 0

如果检测到鼠标相对于页面而不是画布的位置，则需要获得画布在页面上的位置，并从鼠标的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>


无标题文件
var画布，ctx；
var circle_数据=[]；
函数圆（x、y、半径）
{
这个.x=x；
这个。y=y；
这个半径=半径；
圈出数据。推送（此）；
}
圆圈。原型={
绘制：函数（上下文）{
context.beginPath（）；
弧（this.x，this.y，this.radius/5,0,2*Math.PI，false）；
context.fillStyle=“红色”；
context.fill（）；
}
}
getOffsetPosition=功能（obj）{
/*obj是Canvas元素*/
var offsetX=offsetY=0；
if（对象抵销父对象）{
做{
offsetX+=对象offsetLeft；
offsetY+=obj.offsetTop；
}而（对象=对象抵销母公司）；
}   
返回[offsetX，offsetY]；
}
getMouse=函数（e，canvasElement）{
偏移=getOffsetPosition（canvasElement）；
鼠标_x=（e.pageX | |（e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft））-偏移量[0]；
鼠标_y=（e.pageY | |（e.clientY+document.body.scrollTop+document.documentElement.scrollTop））-偏移量[1]；
返回[mouse_x，mouse_y]；
}
函数绘图（）{
翻译（250250）；
对于（变量n=0；n<10；n++）{
var radi=（数学PI/180）；
var x=数学sin（半径*n*36）*70；
变量y=数学cos（半径*n*36）*70；
var半径=50；
var thiscircle=新的圆（x，y，半径）；
这个圆。画（ctx）；
}
}
功能鼠标向下（e）
{
var pos=getMouse（e，ctx.canvas）；
var img_data=ctx.getImageData（位置[0]，位置[1]，1,1）；
日志（img_data.data[3]）；
}
函数init（）{
canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'）；
draw（）；
canvas.addEventListener（'mousedown'，mousedown，false）；
}
init（）；

我假设您知道从img_数据中检索的数据[3]是您单击的像素的alpha值……我现在将其放入HTML中。