[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.drawImage()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");

 const img = new Image();
 img.src = "dom.jpg";
 img.onload = () => {

 // Obraz źródłowy pobierany jest ze współrzędnych (45, 50)
 // o szerokości 100 i wysokości 100
 // przeciągany na płótno w miejscu (250, 250)
 // gdzie otrzymuje szerokość 25 i wysokość 25 pomniejszenie
 ctx.drawImage(img, 45, 50, 100, 100, 250, 250, 25, 25);
 // przeciągany na płótno w miejscu (300, 300)
 // gdzie otrzymuje szerokość 100 i wysokość 100
 ctx.drawImage(img, 45, 50, 100, 100, 300, 300, 100, 100);

 };
 
 document.body.appendChild(img);

 return;

 };

</script>

<canvas id="canvas" width="1" height="1"></canvas>

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");

 const image = new Image();
 image.src = document.getElementById("i").src;
 image.onload = function () {
 ctx.drawImage(this, 0, 0, this.width, this.height);
 ctx.drawImage(this, 33, 71, 104, 124, 200, 200, 87, 104);
 }

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>
<div style="display:none;">
 <img id="i" src="/dom.jpg" width="1" height="1" />
 
</div>

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");

 const image = new Image(30, 16);
 image.src = "dom.jpg";
 image.onload = drawImageActualSize; // Narysuj po załadowaniu obrazu
 

 function drawImageActualSize() {

 canvas.width = this.naturalWidth;
 canvas.height = this.naturalHeight;

 ctx.drawImage(this, 0, 0);
 ctx.drawImage(this, 0, 0, this.width, this.height);
 ctx.drawImage(this, 33, 70, 106, 120, 20, 20, 87, 105);
 
 }

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>
<div style="display:none;">
 <img id="i" src="/dom.jpg" width="1" height="1" />
 
</div>

Opis:
Metoda CanvasRenderingContext2D.drawImage() zapewnia różne sposoby rysowania obrazu na płótnie. Parametry image - element do wciągnięcia w kontekst, specyfikacja dopuszcza dowolne źródło obrazu płótna, w szczególności an HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, VideoFrame, sx - opcjonalny, współrzędna osi x lewego górnego rogu podprostokąta źródła, który image ma zostać wciągnięty w kontekst docelowy, aby pominąć ten argument, użyj składni składającej się z 3 lub 5 argumentów, sy - opcjonalny, współrzędna osi Y lewego górnego rogu podprostokąta źródła, który image ma zostać narysowany w kontekście docelowym. Aby pominąć ten argument, użyj składni składającej się z 3 lub 5 argumentów, sWidth - opcjonalny, szerokość podprostokąta źródła, image który ma zostać narysowany w kontekście docelowym, jeśli nie określono, używany jest cały prostokąt od współrzędnych określonych przez sx i sy do prawego dolnego rogu obrazu. Aby pominąć ten argument, użyj składni składającej się z 3 lub 5 argumentów, wartość ujemna spowoduje odwrócenie obrazu, sHeight - opcjonalny, wysokość podprostokąta źródła, image który ma zostać narysowany w kontekście docelowym, aby pominąć ten argument, użyj składni składającej się z 3 lub 5 argumentów, wartość ujemna spowoduje odwrócenie obrazu, dx - współrzędna osi X w obszarze docelowym, w którym ma zostać umieszczony lewy górny róg źródła image, dy - współrzędna osi Y w obszarze docelowym, w którym ma zostać umieszczony lewy górny róg źródła image, dWidth - szerokość rysowania image na canvas docelowym. Umożliwia to skalowanie rysowanego obrazu, jeśli nie określono, szerokość obrazu nie jest skalowana podczas rysowania, należy zauważyć, że ten argument nie jest uwzględniony w składni składającej się z 3 argumentów, dHeight - wysokość rysowania image na canvas docelowym, umożliwia to skalowanie rysowanego obrazu, jeśli nie określono, wysokość obrazu nie jest skalowana podczas rysowania, należy zauważyć, że tn argument nie jest uwzględniony w składni składającej się z 3 argumentów. Wyjątki InvalidStateError DOMException - zgłaszany, gdy obraz nie zawiera danych obrazu lub jeśli szerokość lub wysokość obszaru roboczego lub prostokąta źródłowego wynosi zero, TypeMismatchError DOMException - zgłaszany, gdy obraz null lub undefined jest przekazywany jako parametr.

Zobacz też:
HTMLImageElement -
SVGImageElement -
HTMLVideoElement -
HTMLCanvasElement -
ImageBitmap -
OffscreenCanvas -
VideoFrame -
InvalidStateError DOMException -
TypeMismatchError DOMException -