我试图用鼠标画在HTML5画布上,但它似乎运行良好的唯一方法是如果画布位于0,0(左上角),如果我改变画布位置,由于某种原因它不会像它应该画的那样.这是我的代码.
function createImageOnCanvas(imageId){
document.getElementById("imgCanvas").style.display = "block";
document.getElementById("images").style.overflowY= "hidden";
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var img = new Image(300,300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0),(0));
}
function draw(e){
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
posx = e.clientX;
posy = e.clientY;
context.fillStyle = "#000000";
context.fillRect (posx, posy, 4, 4);
}
HTML部分
<body>
<div id="images">
</div>
<canvas onmousemove="draw(event)" style="margin:0;padding:0;" id="imgCanvas"
class="canvasView" width="250" height="250"></canvas>
我已经读过有一种方法可以在JavaScript中创建一个简单的函数来获得正确的位置,但我不知道如何做到这一点.
有没有办法将位置鼠标放在<canvas>标签内？我想要相对于右上角的位置<canvas>,而不是整个页面.
在chrome canary中,不推荐使用layerX和layerY,但我们应该使用什么呢？
我找到了offsetX,但它不适用于Firefox.所以为了在webkit上没有警告的情况下获取layerX,我已经这样做了:
var x = evt.offsetX || evt.layerX,
y = evt.offsetY || evt.layerY;
但这看起来相当复杂!这是否真的应该让layerX在所有浏览器中运行？
我在使用画布获取鼠标位置时遇到了麻烦.
有两种情况:
1)如果画布div周围没有div元素,那么我就可以获得鼠标位置.
2)当画布被包裹在div当时offsetLeft并且offsetTop不能按预期工作时
这种差异的原因是什么？
我想在HTML5画布上绘制一个10 x 10格的网格,方块上显示数字1-100.单击一个正方形应该调用一个JavaScript函数,并将方形的数字作为变量传递给函数.
我有一个canvas标签来创建一个图形.在我的每一行,我都有一个"点"来启用"鼠标悬停"并显示更多细节.
当我不向此点添加事件监听器时,一切正常.
Firebug警告我:s.addEventListener不是函数...
是否可以创建动态事件监听器？(我是Javascript的新手)
当鼠标移动到一个元素,我想相对于元素的内容区域的左上角光标的鼠标坐标(这是不包括区域填充,边框和轮廓).听起来很简单吧？到目前为止我所拥有的是一个非常受欢迎的功能:
function element_position(e) {
var x = 0, y = 0;
do {
x += e.offsetLeft;
y += e.offsetTop;
} while (e = e.offsetParent);
return { x: x, y: y };
}
并且我将获得相对于元素的鼠标位置element:
p = element_position(element);
x = mouseEvent.pageX - p.x;
y = mouseEvent.pageY - p.y;
这不太正确.由于offsetLeft和offsetTop是一个元件的"外"左上和"内"左上其偏移父之间的差异,则总和位置将跳过所有层次结构中的边界和补白.
这是一个比较,应该(希望)澄清我的意思.
一个常见问题,但我仍然需要帮助.当有人在画布中点击时,我正试图获取并存储鼠标坐标.
我的HTML
<canvas id="puppyCanvas" width="500" height="500" style="border:2px solid black" onclick = "storeGuess(event)"></canvas>
和我的javascript
//setup canvas
var canvasSetup = document.getElementById("puppyCanvas");
var ctx = canvasSetup.getContext("2d");
guessX = 0;//stores user's click on canvas
guessY = 0;//stores user's click on canvas
function storeGuess(event){
var x = event.clientX - ctx.canvas.offsetLeft;
var y = event.clientY - ctx.canvas.offsetTop;
/*guessX = x;
guessY = y;*/
console.log("x coords:" + x + ", y coords" + y);
我已经阅读了很多论坛,w3schools和视频.我已经接近搞清楚,但我错过了一些东西.如果删除ctx.canvas.offsetLeft和ctx.canvas.offsetTop,我可以获取页面的坐标.但我需要以某种方式合并这些以获取画布的坐标,然后存储到变量guessX和guessY中.
我正在尝试使用画布,以便用鼠标可以写出他们的签名.一切正常,直到我拉伸或滚动屏幕然后它在远离鼠标的不同位置绘制线条.
代码:
function onMouseUp(event) {
'use strict';
mousePressed = false;
}
function onMouseMove(event) {
'use strict';
if (mousePressed) {
event.preventDefault();
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
}
function onMouseDown(event) {
'use strict';
mousePressed = true;
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;
ctx.beginPath();
ctx.moveTo(mouseX, mouseY);
}
can.addEventListener('mousemove', onMouseMove, false);
can.addEventListener('mousedown', onMouseDown, false);
can.addEventListener('mouseup', onMouseUp, false);
HTML看起来像:
<canvas id="signature" width="567" height="150"></canvas>
我正在使用此博客中的画布和lineTo方法绘制不同的形状，如矩形、三角形、六边形等。我只想要一种简单的方法来查找我是否在形状内部单击。我可以通过用某种颜色填充形状并检查我单击的点是否具有这种颜色来实现，但我不想使用填充颜色方法。有没有其他方法可以做到？
还发现isPointInPath但它不起作用。