Question

是否可以显示/隐藏部分画布图像，如Image Sprite？

示例案例：

我的画布尺寸为200 X 200。

在一个按钮上单击我想要显示从点（100,100）到（120,120）的画布的一部分。在另一个我希望显示整个画布。

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

Answer 1

由于精灵通常在另一个元素中显示为背景，或许隐藏父元素会处理你的问题吗？

<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";完全更改精灵背景的位置。

Answer 2

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

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cats.png";
function start(){
  ctx.drawImage(img, 0,0,78,86, 0,0,78,86);

  document.getElementById('partial').onclick=function(){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(img, 0,0,78,86, 0,0,78,86);
  }

  document.getElementById('full').onclick=function(){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(img, 0,0);
  }

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<button id='partial'>Show partial canvas</button>
<button id='full'>Show full canvas</button>
<br><canvas id="canvas" width=300 height=300></canvas>

Answer 3

您可以这样剪辑图像。

＆＃13;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var btn = document.getElementById('btn');
var c = 0;

var img = new Image();
img.src = 'http://placehold.it/200/200';

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 0, 0)
}

btn.onclick = function() {
  if (c++ % 2 == 0) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(img, 100, 100, 20, 20, 100, 100, 20, 20);
    btn.value = 'Unclip';
  }
  else {
    context.drawImage(img, 0, 0);
    btn.value = 'Clip';
  }
}

＆＃13;

<input id="btn" type="button" value="Clip" /><br />
<canvas id="canvas"></canvas>

＆＃13;

修改

当用户点击canvas时，您可以获得事件发生位置的确切坐标，如果坐标位于中间圆圈内，您可以使用以下内容切换整个图像相同的裁剪方法。

＆＃13;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var c = 0;

var img = new Image();
img.src = 'http://s25.postimg.org/cv29exevj/index.png';

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 80, 80, 40, 40, 80, 80, 40, 40);
}

canvas.onclick = function(e) {
  var x = e.clientX - canvas.getBoundingClientRect().left;
  var y = e.clientY - canvas.getBoundingClientRect().top;
  if (x >= 80 && x <= 120 && y >= 80 && y <= 120) {
    if (c++ % 2 == 0) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(img, 0, 0);
    } else {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(img, 80, 80, 40, 40, 80, 80, 40, 40);
    }
  }
}

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

是否可以显示/隐藏部分画布图像，如Image Sprite？

3 个答案:

修改