在畫布上繪制多個圖像，然后刪除其中之一
[英]Draw multiple images to canvas and then remove one of them
問題描述
獲得Canvas元素及其上下文之后
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
假設我在上面畫了3張圖片。
context.drawImage(image,x,y,100,100);
context.drawImage(image,x+20,y+20,100,100);
context.drawImage(image,x+40,y+40,100,100); //image 3
如何從畫布上刪除圖像3並保留其他兩個圖像？ clearRect不會在繪圖區域中刪除任何內容嗎？！ 如果沒有，為什么？
非常感謝。
3 個解決方案
解決方案1
1 已采納 2016-06-16 19:27:02
它不包含任何單獨的元素，就像我們在html中看到的那樣，當多個元素在另一個具有不同z-index的元素上流動時。 它就像一個狀態。 因此，它就像一個像素數據數組（它們稱為ImageData）。 您可以捕獲狀態。
只是一個示例代碼：
<!DOCTYPE html>
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">
<table>
<tr>
<td>
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</td>
<td>
<p>Extra Canvas:</p>
<canvas id="myCanvas2" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</td>
</table>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
ctx.drawImage(img, 110, 40);
var c2 = document.getElementById("myCanvas2"); // will copy the sate here
c2.getContext("2d").putImageData(ctx.getImageData(0, 0, 240, 297), 0, 0);
ctx.drawImage(img, 30, 60);
}
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet Explorer 8 and earlier versions.</p>
我剛剛修改了w3schools tryIt的示例代碼（ http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage ）。
您可以使用ctx.save()在使用drawImage()進行更改時保持可恢復狀態。 要恢復到最后的保存狀態，可以使用ctx.restore() 。
解決方案2
1
如何從畫布上刪除圖像3並保留其他兩個圖像？
例如，您需要使用clearRect()清除畫布，然后僅重繪要保留的畫布。 畫布上只有未綁定的像素，您需要手動跟蹤。
關於此操作的一個建議是將有關圖像的信息封裝到一個簡單的對象中：
var oImg1 = {
image: img1, // image object
visible: true, // state
x: 10, // handy
y: 10 // dandy
},
//... etc. for the other images (could use an array if there are many)
然后
if (oImg1.visible) ctx.drawImage(oImg1.image, oImg1.x, oImg1.y);
當您需要刪除visible為false的圖像集時，請使用條件清除並重繪。
解決方案3
1 2016-06-16 20:39:29
如果通過循環執行此操作，則可以簡單地清除並重新繪制所需的圖像。
或者，您可以簡單地繪制不再需要的圖像。
例如
<img id="img1" src="GITS01.jpg" style="display:none;">
<img id="img2" src="Matrix01.jpg" style="display:none;">
<img id="img3" src="silent-hills2.jpg" style="display:none;">
<canvas id="canvas"></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
ctx.canvas.width = window.innerWidth * 0.8;
ctx.canvas.height = window.innerHeight * 0.8;
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var img3 = document.getElementById('img3');
// Let's clear the canvas first.
ctx.fillStyle = '#101010';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// Draw 3 images, top left, top right and bottom right quadrants.
ctx.drawImage(img1, 0, 0, ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.drawImage(img2, ctx.canvas.width / 2, 0, ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.drawImage(img3, 0, ctx.canvas.height / 2, ctx.canvas.width / 2, ctx.canvas.height / 2);
// Now, let's remove that second image in the top right quadrant,
// by simply drawing over it with a blank rectangle.
ctx.fillRect(ctx.canvas.width / 2, 0, ctx.canvas.width / 2, ctx.canvas.height / 2);
</script>
根據需要繪制的內容或元素重疊的情況，只需清除畫布並重新繪制所需的內容即可。 這是因為畫布以即時模式繪制。 您要么需要重新繪制剛剛繪制的內容，要么必須清除並重新開始，刪除不需要的內容的繪制操作。
在畫布上繪制多個圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.