当mouseover事件触发时,我有以下内容在画布上绘制多边形:
$(document).ready(function() {
$('#flam').mouseover(function() {
context.fillStyle = '#f00';
context.beginPath();
context.moveTo(98,265);
context.lineTo(197,240);
context.lineTo(197,235);
context.lineTo(227,220);
context.lineTo(242,220);
context.lineTo(245,209);
context.lineTo(252,208);
context.lineTo(252,200);
context.lineTo(274,179);
context.lineTo(277,179);
context.lineTo(290,166);
context.lineTo(191,72);
context.lineTo(164,97);
context.lineTo(166,112);
context.lineTo(94,129);
context.lineTo(105,170);
context.lineTo(72,177);
context.closePath();
context.fill();
$('#flam').mouseout(function() {
//What do I need to do here to clear this on mouseout
;})
;})
或者还有另一种更有效的方法吗
答案 0 :(得分:6)
好的,我的答案完全改变了: - )。
您需要做什么:
- 在图像顶部设置画布
- >用于画布和图像:position:absolute;顶:0像素;左:0像素;
- 为了让IE工作(对于@Kerry Liu的评论),似乎
你不能忽视IE中画布上的鼠标事件,所以设置另一个空
画布上的图像+图像,并勾选此最新图像上的区域
- 为您的所有区域添加一个类,以便能够选择它们。我选择'mapPart'
- 挂钩将在鼠标画布上绘制多边形的事件
遍布所有mapParts
- 挂钩一个事件,将鼠标移出所有mapParts清除画布。
http://jsfiddle.net/gamealchemist/cmKsD/
(使用jQuery 1.9.1)
(从@enhzflep那里得到的回答,我把多边形图画给了我们:-)
在这里:How to apply Hovering on html area tag?
人们可能想像他一样处理其他区域类型。 )
html(摘录):
<div id='myImage' class="map">
<img src="http://www.linkparis.com/images/francemap.jpg" border="0"
style='position:absolute; top:0px; left:0px;' />
<canvas id='myCanvas' height='494' width='494' style='position:absolute; top:0px; left:0px;'>Canvas is not supported by your browser.</canvas>
<img border="0" usemap="#imgmap" style='position:absolute; top:0px; left:0px; width:100%; height:100%; ' usemap="#imgmap" />
</div>
<map id="imgmap" name="imgmap">
<area shape="poly" id="flam" class="mapPart" coords="98,265,197,240,197,235,227,220,242,220,245,209,252,208,252,200,274,179,277,179,
290,166,191,72,164,97,166,112,94,129,105,170,72,177" />
<area shape="poly" id="ancaster" class="mapPart" coords=" 198,240,97,265,103,274,232,334,254,263,251,261,251,243,243,245,240,235,
229,240,229,240,222,240,216,244,213,237" />
....
代码:
var cv = document.getElementById('myCanvas');
var context = cv.getContext('2d');
context.clearRect(0, 0, cv.width, cv.height);
$('.mapPart').mouseover(function () {
var coordStr = this.getAttribute('coords');
// draw
drawPolygon(context, coordStr);
});
$('.mapPart').mouseout(function () {
// clear
context.clearRect(0, 0, cv.width, cv.height);
});
function drawPolygon(hdc, coOrdStr) {
var mCoords = coOrdStr.split(',');
var i, n;
n = mCoords.length;
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i = 2; i < n; i += 2) {
hdc.lineTo(mCoords[i], mCoords[i + 1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
hdc.stroke();
}