mehrere Bilder auf die Leinwand ziehen und dann einer von ihnen entfernen

-1

Nachdem sie ein Canvas-Element und seinen Kontextmehrere Bilder auf die Leinwand ziehen und dann einer von ihnen entfernen

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d');

die ich darauf zog 3 Bilder Lassen Sie sagen.

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

Wie entferne ich Bild 3 von der Leinwand, während ich die anderen beiden teile? Wird nicht clearRect etwas im Zeichnungsbereich entfernen ?! Wenn nicht, warum?

Vielen Dank.

Quelle

2016-06-16 Victor Ferreira

Es enthält kein separates Element wie wir in HTML sehen, wenn mehrere Elemente über einen anderen mit anderen Z-Index fließen. Es ist wie ein Staat. Es ist also wie ein Array von Pixeldaten (sie nennen es ImageData). Sie können einen Zustand erfassen.

Nur ein Beispielcode:

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

ich den Beispielcode von w3schools Tryit gerade geändert (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage).

Sie können ctx.save() verwenden, um einen wiederherstellbaren Status beizubehalten, während Sie Änderungen unter Verwendung von drawImage() vornehmen. Um den letzten Speicherzustand wiederherzustellen, können Sie ctx.restore() verwenden.

Quelle

2016-06-16 19:27:02

Wie entferne ich Bild 3 von der Leinwand, während ich die anderen beiden teile?

Sie müssen die Zeichenfläche zum Beispiel mit clearRect() löschen und dann nur diejenigen neu zeichnen, die Sie behalten möchten. Es gibt nur ungebundene Pixel auf der Zeichenfläche, die Sie manuell nachverfolgen müssen.

Ein Vorschlag, wie dies zu tun ist, um die Informationen über ein Bild in ein einfaches Objekt kapselt:

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)

Dann

if (oImg1.visible) ctx.drawImage(oImg1.image, oImg1.x, oImg1.y);

Wenn Sie ein Bild visible zu false gesetzt entfernen müssen, Löschen und neu zeichnen unter Verwendung von Bedingungen.

Quelle

2016-06-16 20:20:54 K3N

Sie können die Bilder einfach löschen und neu zeichnen, wenn Sie dies über eine Schleife tun.

Oder Sie können einfach über das Bild, das Sie nicht mehr benötigen, zeichnen.

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

Je nachdem, was Sie sonst noch brauchen, um Sie zu zeichnen, oder wenn es Elemente ist überlappen, dann werden Sie müssen einfach die Leinwand löschen und neu zu zeichnen, was Sie benötigen.Dies liegt daran, dass die Zeichenfläche im Sofortmodus gezeichnet wird. Sie müssen entweder zeichnen, was Sie gerade gezeichnet haben, oder Sie müssen löschen und neu beginnen und die Zeichenoperationen für die Dinge entfernen, die Sie nicht benötigen.

Quelle

2016-06-16 20:39:29 ManoDestra

mehrere Bilder auf die Leinwand ziehen und dann einer von ihnen entfernen

Antwort

Verwandte Themen