如何使用html5和javascript创建鼠标点击事件图像
我是html5的新手,我想在点击事件中创建一个类似点的图像。我尝试使用上下文,但不幸的是没有工作。我使用的代码是如何使用html5和javascript创建鼠标点击事件图像,javascript,html,canvas,Javascript,Html,Canvas,我是html5的新手,我想在点击事件中创建一个类似点的图像。我尝试使用上下文,但不幸的是没有工作。我使用的代码是 document.addEventListener("DOMContentLoaded", init, false); function init() { var canvas = document.getElementById("options"); canvas.addEventListener("mousedown",
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("options");
canvas.addEventListener("mousedown", getPosition, false);
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("options");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
alert("x: " + x + " y: " + y);
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
请指出我哪里做错了。给出您的建议不确定这是否是问题所在,但要在画布上绘制点,您可以开始一条路径,绘制一条完全闭合的圆弧(从0 rad到2pi rad)并填充:
b_context.beginPath();
b_context.arc(x, y, 5 , 0, 2 * Math.PI,true);
b_context.fillStyle = "blue";
b_context.fill();
此外,重要的是直接在画布上设置宽度和高度,而不是在css中设置,以防止失真。(我自己刚发现;)
完整的fiddle示例:(单击右侧矩形内进行测试)与之交互的html是什么样子的?我有一个从xml获取的图像。在这一点上,我必须应用鼠标点击事件,我点击的地方应该出现点状图像。这是我用来获取点击坐标的javascript代码片段看起来所有的计算都是针对id为“options”的画布完成的,但上下文是在id为b的画布上获得的。这是故意的吗?在代码示例中,x和y永远不会用于填充。也许这是一个测试变量?是的,计算用于选项。对不起,我弄错了,我写了他们的b行,但还是不行。是x和y是测试变量