Question

我一直在尝试在游戏中创建菜单的副本，但有一件事缺失了。当你悬停不同的画布时，我希望它们改变不透明度，但由于它不是div或图像，所以它非常复杂。因为我还在努力学习这一切，所以我想知道如何才能实现这一目标。

我的Javascript：

var can=document.getElementById("NewCanvas");
    var ctx=can.getContext("2d");
    var img = new Image();

    img.onload = function() {
    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(48,152);
    ctx.lineTo(42,9);
    ctx.lineTo(305,10);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(560,152);
    ctx.lineTo(540,10);
    ctx.lineTo(305,9);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(561,150);
    ctx.lineTo(613,206);
    ctx.lineTo(613,375);
    ctx.lineTo(606,480);
    ctx.lineTo(536,442);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();


    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(563,455);
    ctx.lineTo(564,603);
    ctx.lineTo(305,602);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(305,602);
    ctx.lineTo(48,602);
    ctx.lineTo(45,447);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(45,447);
    ctx.lineTo(1,447);
    ctx.lineTo(1,152);
    ctx.lineTo(48,152);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();
    }

  img.src='http://i.imgur.com/povcJq8.png';

和HMTL / CSS：

<canvas style="position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -300px;"id="NewCanvas" height="700" width="700">
</canvas>

Answer 1

我认为您需要做的是跟踪鼠标在屏幕上的位置。我更新了你的小提琴，它可以显示你指向的位置。一旦你知道你指向哪个部分，就可以使用你明显知道如何创建叠加层的相同画布方法。

http://jsfiddle.net/wkx8dzn0/5/

你可以看到我在JS底部添加了两个函数。 getMousePos返回画布上鼠标的X和Y坐标的位置。只要在画布上移动鼠标，另一个函数就会运行，使用addEventListener方法。

以下是javascript代码：

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
var centerX = 305;
var centerY = 306;
  return {
    x: evt.clientX - rect.left - centerX,
    y: - ( evt.clientY - rect.top - centerY )
  };
}

can.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(can, evt);
var angle = Math.atan(mousePos.y/mousePos.x) * 180 / Math.PI;
if (mousePos.x < 0){
  angle = 180 + angle;
}else if (mousePos.y < 0){
  angle = 360 + angle;
}

  var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + ' atan ' + angle;
// now you know where the mouse is, create your overlay depending on where the mouse is
if (angle <= 30){
  message += " SMGs";
}else if (angle <= 90){
  message += " HEAVY";
}else if (angle <= 150){
  message += " PISTOLS";
}else if (angle <= 210){
  message += " GRENADES";
}else if (angle <= 270){
  message += " GEAR";
}else if (angle <= 330){
  message += " RIFLES";
}else{
  message += " SMGs";
}

$('#msg').text(message);

}, false);

使用悬停切换画布上的不透明度

1 个答案: