添加动态画布的链接

Question

我有一个画布脚本，带有动态数据。我想添加一个链接，将网站分享到Facebook：

https://gyazo.com/c1fd1fe956fddba27b48907dc0e9de0a

图标是我没有通过画布生成它们的图像的一部分，现在如果我听一下合作点击它将无法工作，因为它会寻找第一个画布部分的点击...我怎样才能将这些图标作为图像的一部分进行点击....

制作菜单的部分：

ig.module("game.entities.gameover").requires("impact.entity", "game.entities.button-gameover").defines(function() {
var b = new ig.Timer;
EntityGameover = ig.Entity.extend({
    size: {
        x: 302,
        y: 355
    },
    type: ig.Entity.TYPE.B,
    animSheet: new ig.AnimationSheet("media/graphics/game/gameover.png", 301, 352),
    zIndex: 900,
    globalAlpha: 0.1,
    closeDialogue: !0,

    init: function(c, d, g) {
        this.parent(c, d, g);
        this.addAnim("idle", 1, [0]);
        this.currentAnim = this.anims.idle;
        this.tween({
            pos: {
                x: 89,
                y: 120
            }
        }, 0.5, {
            easing: ig.Tween.Easing.Back.EaseInOut
        }).start();
        this.storage = new ig.Storage;
        this.storage.initUnset("highscore-CTF", 0);
        this.storage.initUnset("highscore-CTF2", 0);
        this.storage.initUnset("highscore-CTF3", 0);
        ig.global.score > this.storage.get("highscore-CTF") ? (this.storage.set("highscore-CTF3", this.storage.get("highscore-CTF2")), this.storage.set("highscore-CTF2", this.storage.get("highscore-CTF")), this.storage.set("highscore-CTF", ig.global.score), this.storage.initUnset("highscore-CTF2", 0), this.storage.initUnset("highscore-CTF3", 0)) : ig.global.score > this.storage.get("highscore-CTF2") ?
            (this.storage.set("highscore-CTF3", this.storage.get("highscore-CTF2")), this.storage.set("highscore-CTF2", ig.global.score), this.storage.initUnset("highscore-CTF2", 0), this.storage.initUnset("highscore-CTF3", 0)) : ig.global.score > this.storage.get("highscore-CTF3") && this.storage.set("highscore-CTF3", ig.global.score);
        this.storage.initUnset("total-CTF", 0);
        this.storage.set("total-CTF", this.storage.get("total-CTF") + ig.global.score);
        ig.game.spawnEntity(EntityButtonGameover, 23, 700, {
            buttonID: 1
        });
        ig.game.spawnEntity(EntityButtonGameover,
            220, 700, {
                buttonID: 2
            });
        ig.game.spawnEntity(EntityButtonGameover, 390, 700, {
            buttonID: 3
        });
        b.set(0.3)
    },
    update: function() {
        this.parent()
    },
    draw: function() {
        this.ctx = ig.system.context;
        this.closeDialogue ? (this.ctx.save(), this.ctx.fillStyle = "#000000", this.ctx.globalAlpha = this.globalAlpha, this.ctx.fillRect(0, 0, 480, 640), this.ctx.restore(), this.globalAlpha = 0.7 <= this.globalAlpha ? 0.7 : this.globalAlpha + 0.01) : this.closeDialogue || (this.ctx.save(), this.ctx.fillStyle = "#000000", this.ctx.globalAlpha = this.globalAlpha, this.ctx.fillRect(0,
            0, 480, 640), this.ctx.restore(), this.globalAlpha = 0.1 >= this.globalAlpha ? 0 : this.globalAlpha - 0.05);
        this.parent();
        this.ctx.font = "30px happy-hell";
        this.ctx.fillStyle = "#5b2a0b";
        this.ctx.textAlign = "center";
        this.ctx.fillText(_STRINGS.UI.Best, this.pos.x + 70, this.pos.y + 180);
        this.ctx.fillText(_STRINGS.UI.Score, this.pos.x + 70, this.pos.y + 260);




        //share
        this.ctx.font = "30px happy-hell";
        this.ctx.fillStyle = "#ffffff";
        this.ctx.textAlign = "left";
        this.ctx.fillText(this.storage.getInt("highscore-CTF"), this.pos.x + 140, this.pos.y + 180);
        this.ctx.fillText(ig.global.score, this.pos.x + 140, this.pos.y + 260)
    },
    closeDialogueFunc: function() {
        this.closeDialogue && (this.tween({
            pos: {
                x: 89,
                y: -600
            }
        }, 0.5, {
            easing: ig.Tween.Easing.Back.EaseInOut
        }).start(), this.closeDialogue = !1)
    }
})

}）;

Answer 1

向画布图形添加菜单的简单通用方法是简单地覆盖绝对定位的DOM结构。您的浏览器已经内置了所有事件处理功能，无需重新发明轮子。

＆＃13;

＆＃13;

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0, 155, 255)';
ctx.fillRect(0, 0, canvas.width, canvas.height)

＆＃13;

#container {
  position: relative;
  display: inline-block;
}
#menu {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#menu a {
  padding: 15px;
  font-size: 50px;
  line-height: 100px;
  color: black;
  text-shadow: 2px 2px 5px white;
}
#menu a:hover {
  color: white;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<div id='container'>
  <canvas id='canvas' width='400' height='100'></canvas>
  <div id='menu'>
    <a href='http://facebook.com'><i class='fa fa-facebook-official'></i></a>
    <a href='http://twitter.com'><i class='fa fa-twitter'></i></a>
    <a href='http://whatsapp.com'><i class='fa fa-whatsapp'></i></a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

您的浏览器能够非常快速地呈现此类叠加菜单。您应该使用CSS来设置叠加菜单链接或按钮的样式。

Answer 2

在这种情况下你有几个操作。

选项1： 你需要记住边界区域＆＃34;三个按钮。任何时候画布收到＆＃34;点击＆＃34;，获取点击位置（How do I get the coordinates of a mouse click on a canvas element?）。一旦获得点击位置。检测所述点击是否发生在按钮的边界区域内。如果是，请使用window.open去那里。

选项2：与选项1类似，但不是记住＆＃34;边界区域＆＃34;，而是创建一个与背景为黑色的图像大小相同的隐藏画布（＆＃39;＃000000＆＃ 39;）和按钮给出了鲜明的颜色（例如，Facebook为红色，Twitter为绿色，环聊为蓝色？）。 然后，类似于选项1，获取相对于画布的单击位置。然后在隐藏的画布层的上下文中使用ctx.getImageData(sx, sy, sw, sh)。如果你得到的价值是红色，那么用户点击Facebook，如果是绿色，Twitter，如果是蓝色，环聊。

Answer 3

我已设法点击画布中的某个元素。

我试图用评论来解释它的作用。 我已经制作了3个限制，如下图所示。

我只是比较x值，如果它在这些限制之间。它可能更复杂，因此getCursorPosition()方法返回带有x和y组件的对象，以防您需要进行更多比较。

https://jsfiddle.net/_jserodio/asa10pye/

＆＃13;

＆＃13;

    var canvas;
    var ctx;

    // first get your canvas
    canvas = document.getElementById('canvas');
    canvas.width = 253;
    canvas.heigth = 68;

    // assign the context
    ctx = canvas.getContext("2d");

    // asign click event to the canvas
    addEventListener("click", listener, false);

    function listener(e) {
      // if you have 3 buttons
      var position = getCursorPosition(e);

      var limit1 = canvas.width / 3;
      //console.log("limit1: " + limit1);
      var limit2 = canvas.width * 2 / 3;
      //console.log("limit2: " + limit2);
      var limit3 = canvas.width;
      //console.log("limit3: " + limit3);

      if (position.x < limit1) {
        console.log("go to facebook");
        //window.open("http://www.facebook.com");
      } else if (position.x < limit2) {
        console.log("go to twitter");
        //window.open("http://www.twitter.com");
      } else if (position.x < limit3) {
        console.log("go to whatsapp");
        //window.open("http://www.whatsapp.com");
      }

      //console.log("\nx" + position.x);
      //console.log("y" + position.y);
    }

    function getCursorPosition(event) {
      var rect = canvas.getBoundingClientRect();
      var x = event.clientX - rect.left;
      var y = event.clientY - rect.top;
      var data = {
        x: x,
        y: y
      };
      return data;
    }

    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function() {
      ctx.drawImage(this, 0, 0);
    };

    imageObj.src = 'https://justpaste.it/files/justpaste/d307/a11791570/file1.png';

＆＃13;

<canvas id='canvas' width="253" height="68">

</canvas>

＆＃13;

＆＃13;

＆＃13;

<强>加成！
在这里你有一个我用它做的演示。 demo (Draughts/checkers)。
如果需要，您可以查看the entire code here。