gpt4 book ai didi

Javascript:水平翻转图像对象并将其保存为新的图像对象

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:48:21 25 4
gpt4 key购买 nike

我创建了一个显示在 Canvas 元素上的箭头 Sprite ,最初它指向右边,然后向右移动。当它开始向左移动时,我想旋转这个 Sprite 。

我使用了多个 Sprite ,所以翻转整个 Canvas 并不是一个真正的选择。

我当然可以创建两个单独的 sprite,但理想情况下,我认为如果我在开始时旋转 sprite 并将其保存到一个新的 Image 对象中会更好。这可能吗?我应该怎么做?

附言只有 Javascript,没有 jQuery。

var imagetest = new Image();
imagetest.src = "./img/arrow.png";

最佳答案

您可以将目标设置为现有的 IMG 标签或某些 JS 图像对象:

<html>
<head>
<script>
function flip(src,target){
var img = new Image();
img.onload = function(){
var c = document.createElement('canvas');
c.width = this.width;
c.height = this.height;
var ctx = c.getContext('2d');
ctx.scale(-1,1);
ctx.drawImage(this,-this.width,0);
this.onload = undefined;
target.src = c.toDataURL();
}
img.src = src;
}
</script>
</head>
<body onload="flip('SOMESPRITE.PNG',document.getElementById('fliptest'));">
<img id="fliptest" />
</body>
</html>

关于Javascript:水平翻转图像对象并将其保存为新的图像对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21610321/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com