Javascript Sprite 动画不透明

如何解决Javascript Sprite 动画不透明

初次接触 javaScript 作为一种语言，但具有相当多的编程和开发经验。

我正在尝试将精灵表加载到 HTML5 画布元素中。

图片加载到一个普通的透明 img 标签中。

当我在 JavaScript 中绘制图像时，它会以透明度加载。

当我尝试遍历精灵表以显示缩放的精灵时，它不显示透明度。

您还可以看到背景实际上是精灵的尺寸，而不是我告诉它在画布上绘制的尺寸。

做到这一点并获得透明度的最佳方法是什么？由于我正在尝试学习 JavaScript，因此我希望得到一种 JavaScript 解决方案，而不是 CSS 解决方案。我看过教程，他们希望我遍历图像中的每个像素以确定它的值，然后删除透明度。哦，我的天哪，这似乎需要不断地做大量的工作，我不喜欢它！

这就是我要说的：

https://test.cyberlearner.com/arcade/GuyGame/mainContent2.php

这是我的代码：

<canvas id="guyCanvas" width="800px" height="400px" />
</canvas>
<script>
    var guyCanvas = document.getElementById('guyCanvas');
    var guyContext = guyCanvas.getContext('2d');
    guyContext.fillStyle = "blue";
    guyContext.fillRect(0,guyCanvas.width,guyCanvas.height);
    
    var guyx = 400;
    var guyy = 200;
    var guydx = 2;
    var guydy = -2;
    var testimage = new Image;
    testimage.src = 'images/OldGuySprite.png'; 
    let guyImage = new Image;
    guyImage.src = 'images/OldGuySprite.png';
    let counter = 0,guyFrame_width = 223,guyFrame_height = 450;
    guyImage.onload = function() {
    window.requestAnimationFrame(animate);
        function animate() {
            let guyFrame = Math.floor(counter % 4);
            guyContext.clearRect(guyx,guyy,guyFrame_height);
            guyContext.drawImage(guyImage,guyFrame * guyFrame_width,guyFrame_width,guyFrame_height,guyx,guyFrame_width/4,guyFrame_height/4);
            counter = counter + .25;
            window.requestAnimationFrame(animate);
        }
}

guyContext.drawImage(testimage,0);

</script>

<table><tr><td  style="background-color:#FF0000">
<img src="images/OldGuySprite.png">
</td></tr>
</table>