与rect交互，带我到另一个页面HTML JS Canvas

Question

菜单

我希望在用户点击播放时将其转到另一个HTML页面。我已经在游戏区域放置了一个矩形，并且想要制作它，因此矩形是用户点击的内容，因为播放文本是单个图像的一部分。

这是我的矩形的JS：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(125, 140, 230, 90);  
 ctx.stroke();

Answer 1

你可以像这样实现它

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = draw;

function draw() {
    canvas.width = this.width;
    canvas.height = this.height;
    ctx.drawImage(this, 0, 0);
    ctx.beginPath();
    ctx.lineWidth = "6";
    ctx.strokeStyle = "red";
    ctx.rect(101, 114, 184, 71);
    ctx.stroke();
}

img.src = 'https://i.stack.imgur.com/M3x29.jpg';

canvas.onclick = function(e) {
    if (e.offsetX > 102 && e.offsetX < 286 && e.offsetY > 110 && e.offsetY < 182) {
        window.location = 'http://stackoverflow.com'; // another html page location
    }
};

<canvas id="canvas"></canvas>