是否可以显示/隐藏诸如Image Sprite的画布图像的一部分?

示例案例:

我有一个200 X 200尺寸的画布。

在一个按钮上单击我要显示从点(100,100)到(120,120)的部分画布。
在另一个我想展示整个画布。

有什么帮助吗?

最佳答案

由于精灵通常在另一个元素中显示为背景,因此隐藏父元素可能会解决您的问题?

<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>


如果精灵的位置在右边100px。您也可以使用document.getElementById('#sprite').style.backgroundPosition="200px 200px";完全更改精灵背景的位置。

10-05 20:37
查看更多