是否可以显示/隐藏诸如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";
完全更改精灵背景的位置。