Question

目前我正在用HTML5中的canvas对象创建一张方格纸。我能够通过找到x / y位置来创建画布以及用颜色填充所选区域。不幸的是，我遇到了一些麻烦，使用jQuery mousemove方法显示为方块选择的信息的弹出窗口。

这是我的代码：

Canvas Creation/Layout:<br>

<script type="text/javascript">
var canvas;
var context;
var color;
var state;
var formElement;
var number = 0;

function showGrid()
{
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');

    context.lineWidth=0.5;
    context.strokeStyle='#999999';
    lineSpacing=10;

    var xPos = 0;
    var yPos = 0;

    var numHorizontalLines = parseInt(canvas.height/lineSpacing);
    var numVerticalLines = parseInt(canvas.width/lineSpacing);
    state = new Array(numHorizontalLines);

    for (var y = 0; y < numHorizontalLines; ++y)
    {
    state[y] = new Array(numVerticalLines);
    }

    for(var i=1; i<=numHorizontalLines;i++)
    {
        yPos=i*lineSpacing;
        context.moveTo(0,yPos);
        context.lineTo(canvas.width,yPos);
        context.stroke;
    }

    for(var i=1; i<=numVerticalLines; i++)
    {
        xPos=i*lineSpacing;
        context.moveTo(xPos,0);
        context.lineTo(xPos,canvas.height);
        context.stroke();
    }

}

function fill(s, gx, gy)
{
        context.fillStyle = s;
        context.fillRect(gx * lineSpacing, gy * lineSpacing, lineSpacing, lineSpacing);
        if(s != null)
        {

        }
}

function getPosition(e)
{
   var x = new Number();
   var y = new Number();
   var canvas = document.getElementById("canvas");

   if (e.pageX || e.pageY) 
   {
      x = e.pageX;
      y = e.pageY;
    }
    else 
    {
       x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
       y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
     }

   x -= canvas.offsetLeft;
   y -= canvas.offsetTop;

    var gx = Math.floor((x / lineSpacing));
    var gy = Math.floor((y / lineSpacing));

    state[gy][gx] = true;
    fill(color, gx, gy);
    addNumber();
}

HTML：

<div class="graphpaper" id="graphpaper" onclick="getPosition(event)" style="width:956px; height:1186px;">
        <img src="images/PosterBorder_Top.png" align="right"/>
        <img src="images/posterBorder_left.png" align="left" valign="top"/>
        <canvas id ="canvas" width = "920" height = "1160" align="left">
        </canvas>
    </div>
 <!-- HIDDEN / POP-UP DIV -->
            <div id="pop-up">
              <h3>Pop-up div Successfully Displayed</h3>
              <p>
                This div only appears when the trigger link is hovered over.
                Otherwise it is hidden from view.
              </p>
            </div>

用于弹出显示的jQuery：

$('#canvas').mousemove(function(event){
    console.log("Here I am!");
     $('div#pop-up').show().appendTo('body');
});

有什么建议？我显然错过了一些东西，但是从我所做的事情来看，我应该相信这一点。

在画布上显示隐藏的Div位置鼠标移动

0 个答案: