Javascript 在画布上显示隐藏的Div位置鼠标移动
Javascript 在画布上显示隐藏的Div位置鼠标移动,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,目前,我正在用HTML5中的canvas对象创建一张图表纸。我能够通过查找x/y位置来创建画布,并用颜色填充选定区域。不幸的是,我在使用jquerymousemove方法显示为正方形选择的信息的弹出窗口时遇到了一些问题 这是我的代码: Canvas Creation/Layout:<br> <script type="text/javascript"> var canvas; var context; var color; var state; var formElem
目前,我正在用HTML5中的canvas对象创建一张图表纸。我能够通过查找x/y位置来创建画布,并用颜色填充选定区域。不幸的是,我在使用jquerymousemove方法显示为正方形选择的信息的弹出窗口时遇到了一些问题
这是我的代码:
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();
}
有什么建议吗?我显然错过了一些东西,但从我所做的事情来看,我相信这应该是可行的。对我来说是开箱即用的。我唯一的建议是将
linespace
设置为全局变量。我的建议是使用jQuery,尤其是当您仅使用它附加事件时。
<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>
$('#canvas').mousemove(function(event){
console.log("Here I am!");
$('div#pop-up').show().appendTo('body');
});