javascript - 是否可以显示/隐藏部分 Canvas 图像，如 Image Sprite？

Question

是否可以像 Image Sprite 那样显示/隐藏 Canvas 图像的一部分？

案例:

我有一个 200 X 200 尺寸的 Canvas 。

在单击一个按钮时，我想显示从点 (100, 100) 到 (120, 120) 的部分 Canvas 。 在另一个我想展示整个 Canvas 。

关于如何做到这一点有什么帮助吗？

Answer 1

由于 Sprite 通常显示在另一个元素中作为背景，也许隐藏父元素可以解决您的问题？

<style>
    #sprite {
        width: 100px;
        height: 100px;
        background-image: src(sprite.png); 
        background-position: 100px 100px;
    }
</style>
<script>
    var hide = false;

    function show() {
        if(!hide) {
            document.getElementById("sprite").style.width="200px";
            hide = true;
        }
        else {
            document.getElementById("sprite").style.width="100px";
            hide = false;
        }
    }
</script>

<div id="button" onclick="show();">button</div>
<div id="sprite"></div>

这是如果 Sprite 的位置在右边 100px。您还可以使用 document.getElementById('#sprite').style.backgroundPosition="200px 200px"; 来完全改变 Sprite 背景的位置。