Javascript 是否可以显示/隐藏画布图像的一部分，如图像精灵？

是否可以显示/隐藏画布图像的一部分，如图像精灵

示例案例：

我有一个200 X 200维的画布

单击一个按钮，我想显示从点100100到120120的部分画布。 另一方面，我想展示整个画布

---

有关如何执行此操作的任何帮助？

您可以使用drawImage的剪裁形式来显示完整图像的所需部分：

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var cw=画布宽度； var ch=画布高度； var img=新图像； img.onload=启动； img.src=https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cats.png; 功能启动{ ctx.drawImageimg，0,0,78,86,0,0,78,86； document.getElementById'partial'.onclick=function{ ctx.clearRect0,0，cw，ch； ctx.drawImageimg，0,0,78,86,0,0,78,86； } document.getElementById'full'。onclick=function{ ctx.clearRect0,0，cw，ch； ctx.drawImageimg，0,0； } } 正文{背景色：象牙；} 画布{边框：1px纯红；} 显示部分画布 显示完整画布

---

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

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

---

这是如果精灵的位置是右边100像素。您还可以使用document.getElementById'sprite'。style.backgroundPosition=200px 200px；完全更改精灵背景的位置。

您可以通过这种方式剪裁图像

var canvas=document.getElementById'canvas'； var context=canvas.getContext'2d'； var btn=document.getElementById'btn'； var c=0； var img=新图像； img.src=http://placehold.it/200/200'; img.onload=函数{ canvas.width=img.width； canvas.height=img.height； context.drawImageimg，0,0 } btn.onclick=函数{ 如果C++ %2＝＝0 { context.clearRect0，0，canvas.width，canvas.height； context.drawImageimg，100100,20,20100100,20,20； btn.value=‘松开’； } 否则{ context.drawImageimg，0,0； btn.value='Clip'； } }

---

画布上未显示的部分会发生什么情况？只需将画布上要显示的部分擦拭干净，然后在需要的地方绘制。我正在创建图像，就像用户单击“中心圆”时，我想切换整个画布一样。@Srinivas，在结合您对这个问题的评论和重复的后续问题之后，我必须遗憾地告诉您，您选择的html5画布元素不适合您的确切需求。您希望在不清除画布的情况下显示/隐藏画布上的各个元素。html5画布上的图形无法单独显示和隐藏，因为画布不保留对已绘制到其表面上的任何单个图形的引用。画布无法满足您的要求。但我的画布不是cilp和重画的单个图像。我可以用多个圆圈动态创建画布，这些圆圈将被用户输入更改。当用户输入5时，您可以看到画布图像。@Srinivas-查看我的编辑，我想这就是您要查找的内容。@markE-嗯，现在是凌晨1:48，我正要昏倒，我看到了这个问题，所以必须回答它。事实上，在他主要帖子下面的评论中，他说他正在使用这个特定的图片，所以我使用了它。这和原作是一样的。我看到的唯一变化是在画布的点击事件中使用的按钮被替换。请看，您正在使用我在Js fiddle中显示的图像。但在五月的情况下，我实际上是作为画布生成的。清理画布，重新绘制图像。我想用显示/隐藏画布的一部分的方式来做，而不是用清晰和重画的方式。@Srinivas-我仍然不清楚你的问题。请确切地告诉我你想显示/隐藏哪个部分。但我的不是一张cilp和重画的单张图像。我可以用多个圆圈动态创建画布，这些圆圈将被用户输入更改。当用户输入5时，您可以看到画布图像。@Srinivas在看到您的评论之前，我以为我理解了您的问题。你能澄清一下你想做什么吗？当我加载页面时，我正在创建一个带有5个外圆和一个中心的画布。我想像第一个一样实现，我将只显示画布的中心圆。当用户点击中心圆时，我想显示所有的外圆。当用户再次单击中心圆时，我想隐藏所有外圆。你明白了吗？@Srinivas-看看我的编辑。这正是你要找的。不……你又在清理和画画布了。我不想那样做。在我不处理图像精灵之前，我想做显示/隐藏动作。我正在处理画布图像