Question

我改编了一个开源游戏，以适应我的幻想书系列，Eloik。

我想为png图像替换蓝色弧线（大小相同）。

我知道我必须画一幅图像但是怎么样？

这里是代码的一部分：`

       // Shield - Boomlight
        context.beginPath();
        context.strokeStyle = '#0066cc';
        context.lineWidth = 10;
        context.arc( player.position.x, player.position.y, player.radius, 
        player.angle + 1.6, player.angle - 1.6, true );
        context.stroke();`

我尝试了以下代码，但是...... png图像并没有出现在正确的位置，并且它与游戏没有交互作为弧...“

<html>
<body>

<img id="boom" width="176" height="134" src="http://eloik.com/wp/wp-
content/uploads/2017/05/BOOMLIGHT-jeu-bd.png" alt="">

*In the Javascript :

<script>
window.onload = function() {

var image = new Image();
image.src="http://eloik.com/wp/wp-content/uploads/2017/05/BOOMLIGHT-jeu-
bd.png";
context.beginPath();
context.drawImage(image, 10, 10);   
}
</script>

</body>
</html> `

现在，出了什么问题？

谢谢！：）

Answer 1

首先，为了使用drawImage，我们需要加载它。你可以这样做：

/* core.js: line 57 */
// Create a handle for the image
var shieldImage;

/* core.js: line 133 */
// Create a new image
shieldImage = new Image();
// When it's loaded, execute animate
shieldImage.onload = animate;
// Set the src
shieldImage.src = "http://eloik.com/wp/wp-content/uploads/2017/05/BOOMLIGHT-jeu-bd.png";

这样，只有在加载图像后才会调用animate函数。然后，为了定位图像并旋转图像，您可以执行以下操作：

/* core.js: line 420 */
// Set the origin of the canvas on the player position
context.translate(player.position.x, player.position.y);
// Rotate the canvas
context.rotate(player.angle + Math.PI + .2);
// Draw the shield
context.drawImage(shieldImage, -player.radius, -player.radius, player.radius*1.5, player.radius*2.3);
// Rotate the canvas back
context.rotate(-player.angle - Math.PI - .2);
// Reset the initial origin of the canvas
context.translate(-player.position.x, -player.position.y);

由于我们无法旋转图像本身，我们使用此技巧，包括旋转画布，绘制和还原画布的旋转。我们还翻译它以使旋转轴处于玩家位置。

你还会注意到我在那里添加了一些数字。那是因为你的盾牌图像不是一个完美的圆圈。我扭曲了它，使得当前碰撞系统（基于圆圈）看起来并不奇怪。如果要保留图像的椭圆形状，则需要对其余代码进行更严格的更改，以便将碰撞应用于该形状。

就是这样，你的蓝色弧线被你的PNG图像取代（Updated JS here）

PS：你有一个很酷的姓氏！ - 和我的一样

在javascript上更改png图像的对象

1 个答案: