html5画布用鼠标控制,HTML5画布鼠标(HTML5 Canvas Mouse)

HTML5画布鼠标(HTML5 Canvas Mouse)

像我这样的东西有：

function mouseClick(event) {

...

}

canvas.addEventListener("mousedown", mouseClick, false);

function drawRect(x, y) {

context.fillRect(x, y, 16, 16);

};

drawRect(10, 10);

如何做，如果我点击在画布上的Rect得到的东西？ 类似于如果我点击Rect get alert;

对不起，我的英文。

Something like I am have:

function mouseClick(event) {

...

}

canvas.addEventListener("mousedown", mouseClick, false);

function drawRect(x, y) {

context.fillRect(x, y, 16, 16);

};

drawRect(10, 10);

How to do something like if I am click on my Rect in Canvas get something? something like If I am click on Rect get alert;

Sorry for my English language.

原文：https://stackoverflow.com/questions/7224175

更新时间：2019-12-19 21:05

最满意答案

画布不过是一个位图。 没有记录表明在画布上绘制了一个矩形，所以如果您想要检测到点击是在您绘制矩形的区域内，则必须记录您绘制的区域并进行测试反对他们。 例如：

var rects= [];

function mouseClick(event) {

// Get position of click relative to canvas. This is not reliable! Requires

// standards mode, and the canvas not being nested in other offsetParents.

// Getting page-relative co-ordinates reliably in all cases is outside the

// scope of this question...

//

var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft;

var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop;

// Hit-test each rectangle in the list of those drawn

//

for (var i= rects.length; i-->0;) {

var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3];

if (x0<=x && x

alert('you clicked on a rectangle!');

}

}

}

function drawRect(x, y) {

rects.push([x, y, x+16, y+16])

context.fillRect(x, y, 16, 16);

};

drawRect(10, 10);

如果你正在做很多这样的事情，你可能会更好地使用像SVG这样的保留模式绘图系统，而不是纯粹的位图Canvas。 在SVG中，您可以直接在矩形对象上侦听点击事件，移动矩形，重新堆叠等等。

A canvas is nothing more than a bitmap. There is no record kept that there was a rectangle drawn on the canvas, so if you want to detect that the click was inside an area that you drew a rectangle on, you have to keep a record of the areas you've drawn and test against them. eg:

var rects= [];

function mouseClick(event) {

// Get position of click relative to canvas. This is not reliable! Requires

// standards mode, and the canvas not being nested in other offsetParents.

// Getting page-relative co-ordinates reliably in all cases is outside the

// scope of this question...

//

var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft;

var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop;

// Hit-test each rectangle in the list of those drawn

//

for (var i= rects.length; i-->0;) {

var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3];

if (x0<=x && x

alert('you clicked on a rectangle!');

}

}

}

function drawRect(x, y) {

rects.push([x, y, x+16, y+16])

context.fillRect(x, y, 16, 16);

};

drawRect(10, 10);

If you are doing a lot of this sort of thing you are likely to be better off using a retained-mode drawing system like SVG instead of the pure-bitmap Canvas. In SVG you can listen for click events directly on a rectangle object, move the rectangle, re-stack it and so on.

相关问答

这是一个工作示例。

var canvas, ctx, flag = false,

prevX = 0,

currX = 0,

prevY = 0,

currY = 0,

dot_flag = false;

var x = "black",

y = 2;

fu

...

好的，我知道这很奇怪，但添加一个 -webkit-transform: translate3d(0, 0, 0)

样式到画布元素似乎已经解决了这个问题......很奇怪。 Ok, I know this is strange but by adding a -webkit-transform: translate3d(0, 0, 0)

styling to the canvas element seems to have fixed the issue...weird.

#canvasSignature

{

width: 100%;

height: 100%;

background-color: #F0F0F0;

border: 1px solid Black;

cursor: crosshair;

}

这不好！ 根据经验，您永远不想更改画布的CSS宽度/高度。 你实际上是在拉伸整个屏幕的尺寸为300x150的画布。 这可能是99％的鼠标问题的根源。 原因似乎在y方向上很好是纯粹的巧合：画布默认为300x150，你有一个高150的d

...

画布不过是一个位图。 没有记录表明在画布上绘制了一个矩形，所以如果您想要检测到点击是在您绘制矩形的区域内，则必须记录您绘制的区域并进行测试反对他们。 例如： var rects= [];

function mouseClick(event) {

// Get position of click relative to canvas. This is not reliable! Requires

// standards mode, and the canvas not being

...

您可以在鼠标位置创建画布 http://jsfiddle.net/v4nm487b/ document.οnmοusedοwn=mouseDown;

document.οnmοuseup=mouseUp;

var x1,y1;

function mouseDown(e){

x1=e.clientX;

y1=e.clientY;

}

function mouseUp(e){

var can = document.createElement("CANVAS");

c

...

以下是如何监听鼠标点击并获得X / Y位置： http ： //jsfiddle.net/m1erickson/56HXT/ 您可以像这样在画布上听鼠标点击： // listen for mouse clicks on the canvas

// and give the event to the handlClick function

canvas.addEventListener('click', handleClick, false);

单击时，handleCli

...

如果现在有getBoundingClientRect，Dart有一个同步版本，所以你不必再使用异步版本了。 var clientRect = ctx.canvas.getBoundingClientRect();

ctx.canvas.on.click.add((e) {

var x = e.clientX - clientRect.left;

var y = e.clientY - clientRect.top;

});

在MouseEvent中还有“offsetX”和“offset

...

您可以使用直线和二次曲线绘制弯头连接器以弯曲肘部。 例如，你可以在画布的左上角绘制一个从[x：10，y：100]到[x：75，y：20]并且角半径为12的肘部，如下所示： // top-left elbow from 10/100 to 75,20 with corner radius 12

ctx.beginPath();

ctx.moveTo(10,100);

ctx.lineTo(10,20+12);

ctx.quadraticCurveTo( 10,20, 10+12,20 );

ctx.

...

我安装，测试和阅读了文档。 这是我发现的： KineticJS element.on(“mouseover”，function(){}); Easel.js element.addEventListener(“mouseover”，function(){}); 另外，Easel.js有很好的ButtonHelper类，可以自动使用3种不同的图像进行正常，悬停，按下状态。 Crafty.js element.bind('MouseOver'，... MelonJS 没有自动支持。 手动可以使用以下方

...

在样式问题上跳转到画布似乎很奇怪，但忽略了...... 您可以在canvas元素上绑定mousemove事件，然后对您的区域执行命中测试以查看鼠标是否在该区域内。 有效地进行命中测试可能会很棘手，具体取决于您测试的区域数量，但它绝对可行。 画布就像任何其他块级元素一样，因此相同的事件适用并以相同的方式绑定。 这是鼠标事件与canvas交互的一个例子。 在此示例中，事件绑定到文档，但类似的想法适用。 http://dev.opera.com/articles/view/blob-sallad-can

...