javascript - 添加指向动态 Canvas 的链接

Question

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

https://gyazo.com/c1fd1fe956fddba27b48907dc0e9de0a

这些图标是图像的一部分，我没有通过 Canvas 生成它们，现在如果我监听坐标的点击，它将无法工作，因为它也会查找第一个 Canvas 部分上的点击... .我怎样才能使这些图标成为图像的一部分可点击....

制作菜单的部分:

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

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

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

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

#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;
}

<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>

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