Question

这是我的脚本代码..

<body onload= "startGame()">
<script>
var Earth;
var Mercury;
var Venus;

function startGame() {
    Earth = new component(152, 183, 'earth.png', 800, 75);
    Mercury = new component(122,151, 'mercury.png', 300, 400);
    Venus = new component(152, 183, 'venus.png', 520, 240);
    GameArea.start();   
}

var GameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1000;
        this.canvas.height = 642;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas,         document.body.childNodes[0]);

        this.interval = setInterval(updateGameArea, 20);
    },

    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

//make game pieces
function component(width, height, color, x, y) {
    this.type = "image";
    this.image = new Image();
    this.image.src = color;

    this.width = width;   this.height = height;
    this.x = x;           this.y = y;

    this.update = function() {
        ctx = GameArea.context;
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
    }
}

function updateGameArea() {
    GameArea.clear();
    Earth.update();
    Mercury.update();
    Venus.update();
}
</script>
</body>

代码是在浏览器打开时，startGame（）函数启动。我绘制画布，并在画布上显示行星。请参考图片。 This is when javascript on running image. 他们有地球，水星，金星。那个星球都是对象....如果我认为......

我想点击用户点击＆＃34;地球＆＃34;宾语.. 但我不知道该怎么做...... 我应该参考什么？请指教我..！感谢。

Answer 1

你真的不能。当您在画布上绘图时，您实际上绘制了一个大位图图像。你绘制的形状会被添加到它上面。他们实际上并不是对象。

您有两种选择：

从canvas元素中捕获click事件，获取鼠标坐标并使用它来推断单击了哪个对象。
使用EaselJS之类的库。它是围绕画布的一种API，使得使用它更容易。它允许您将点击处理程序附加到画布上的对象。

Answer 2

你基本上必须跟踪你的行星在画布上的位置，然后在画布上设置一个事件监听器。从那里，您可以获取点击事件的坐标并浏览所有行星进行测试。

HTML：

<form id="myCanvas" ... >
</form>

获取画布元素：

var Earth = document.getElementById('myCanvas');

要向canvas元素添加click事件，请使用...

Earth.addEventListener('click', function() { }, false);

查看this示例，其中包含有关 @Brother Woodrow 的信息

如何在javascript画布中单击使用对象的事件？

2 个答案: