JavaScript: Das umfassende Referenzwerk > Referenz für clientseitiges JavaScript > CanvasRenderingContext2D.drawImage( ) - Pg. : Safari Books Online

Table of Contents

Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

This Book

JavaScript: Das umfassende Referenzwerk

JavaScript: Das umfassende Referenzwerk

Search

Contents

Kapitel 1. Einführung in JavaScript

Teil: 1 Der JavaScript-Sprachkern

Teil: 2 Clientseitiges JavaScript

Teil: 3 Referenz für den JavaScript-Sprachkern

Teil: 4 Referenz für clientseitiges JavaScript

Referenz für clientseitiges JavaScript

Anchor.focus( )

Canvas.getContext( )

CanvasGradient.addColorStop( )

CanvasRenderingContext2D

CanvasRenderingContext2D.arc( )

CanvasRenderingContext2D.arcTo( )

CanvasRenderingContext2D.beginPath( )

CanvasRenderingContext2D.bezierCurveTo( )

CanvasRenderingContext2D.clearRect( )

CanvasRenderingContext2D.clip( )

CanvasRenderingContext2D.closePath( )

CanvasRenderingContext2D.createLinearGradient( )

CanvasRenderingContext2D.createPattern( )

CanvasRenderingContext2D.createRadialGradient( )

CanvasRenderingContext2D.drawImage( )

CanvasRenderingContext2D.fill( )

CanvasRenderingContext2D.fillRect( )

CanvasRenderingContext2D.globalCompositeOperation

CanvasRenderingContext2D.lineCap

CanvasRenderingContext2D.lineJoin

CanvasRenderingContext2D.lineTo( )

CanvasRenderingContext2D.miterLimit

CanvasRenderingContext2D.moveTo( )

CanvasRenderingContext2D.quadraticCurveTo( )

CanvasRenderingContext2D.rect( )

CanvasRenderingContext2D.restore( )

CanvasRenderingContext2D.rotate( )

CanvasRenderingContext2D.save( )

CanvasRenderingContext2D.scale( )

CanvasRenderingContext2D.stroke( )

CanvasRenderingContext2D.strokeRect( )

CanvasRenderingContext2D.translate( )

CharacterData.appendData( )

CharacterData.deleteData( )

CharacterData.insertData( )

CharacterData.replaceData( )

CharacterData.substringData( )

CSSStyleSheet.addRule( )

CSSStyleSheet.deleteRule( )

CSSStyleSheet.insertRule( )

CSSStyleSheet.removeRule( )

Document.addEventListener( )

Document.attachEvent( )

Document.createAttribute( )

Document.createAttributeNS( )

Document.createCDATASection( )

Document.createComment( )

Document.createDocumentFragment( )

Document.createElement( )

Document.createElementNS( )

Document.createEvent( )

Document.createExpression( )

Document.createProcessingInstruction( )

Document.createRange( )

Document.createTextNode( )

Document.detachEvent( )

Document.dispatchEvent( )

Document.evaluate( )

Document.getElementById( )

Document.getElementsByTagName( )

Document.getElementsByTagNameNS( )

Document.importNode( )

Document.loadXML( )

Document.removeEventListener( )

DocumentFragment

DOMImplementation

DOMImplementation.createDocument( )

DOMImplementation.createDocumentType( )

DOMImplementation.hasFeature( )

DOMParser.parseFromString( )

Element.addEventListener( )

Element.attachEvent( )

Element.detachEvent( )

Element.dispatchEvent( )

Element.getAttribute( )

Element.getAttributeNode( )

Element.getAttributeNodeNS( )

Element.getAttributeNS( )

Element.getElementsByTagName( )

Element.getElementsByTagNameNS( )

Element.hasAttribute( )

Element.hasAttributeNS( )

Element.removeAttribute( )

Element.removeAttributeNode( )

Element.removeAttributeNS( )

Element.removeEventListener( )

Element.setAttribute( )

Element.setAttributeNode( )

Element.setAttributeNodeNS( )

Element.setAttributeNS( )

Event.initEvent( )

Event.preventDefault( )

Event.stopPropagation( )

ExternalInterface

ExternalInterface.addCallback( )

ExternalInterface.call( )

FlashPlayer.GetVariable( )

FlashPlayer.GotoFrame( )

FlashPlayer.IsPlaying( )

FlashPlayer.LoadMovie( )

FlashPlayer.Pan( )

FlashPlayer.PercentLoaded( )

FlashPlayer.Play( )

FlashPlayer.Rewind( )

FlashPlayer.SetVariable( )

FlashPlayer.SetZoomRect( )

FlashPlayer.StopPlay( )

FlashPlayer.TotalFrames( )

FlashPlayer.Zoom( )

Form.elements[]

History.back( )

History.forward( )

HTMLCollection.item( )

HTMLCollection.namedItem( )

HTMLDocument.all[]

HTMLDocument.close( )

HTMLDocument.cookie

HTMLDocument.domain

HTMLDocument.getElementsByName( )

HTMLDocument.open( )

HTMLDocument.write( )

HTMLDocument.writeln( )

HTMLElement.onclick

HTMLElement.ondblclick

HTMLElement.onkeydown

HTMLElement.onkeypress

HTMLElement.onkeyup

HTMLElement.onmousedown

HTMLElement.onmousemove

HTMLElement.onmouseout

HTMLElement.onmouseover

HTMLElement.onmouseup

HTMLElement.scrollIntoView( )

Input.select( )

JavaArray, JavaClass, JavaObject, JavaPackage

JSObject.call( )

JSObject.eval( )

JSObject.getMember( )

JSObject.getSlot( )

JSObject.getWindow( )

JSObject.removeMember( )

JSObject.setMember( )

JSObject.setSlot( )

JSObject.toString( )

Link.onmouseover

Link.onmouseover

Location.reload( )

Location.replace( )

MouseEvent.initMouseEvent( )

Navigator.javaEnabled( )

Node.appendChild( )

Node.cloneNode( )

Node.hasAttributes( )

Node.hasChildNodes( )

Node.insertBefore( )

Node.isSupported( )

Node.normalize( )

Node.removeChild( )

Node.replaceChild( )

Node.selectNodes( )

Node.selectSingleNode( )

Node.transformNode( )

Node.transformNodeToObject( )

NodeList.item( )

ProcessingInstruction

Range.cloneContents( )

Range.cloneRange( )

Range.collapse( )

Range.compareBoundaryPoints( )

Range.deleteContents( )

Range.detach( )

Range.extractContents( )

Range.insertNode( )

Range.selectNode( )

Range.selectNodeContents( )

Range.setEnd( )

Range.setEndAfter( )

Range.setEndBefore( )

Range.setStart( )

Range.setStartAfter( )

Range.setStartBefore( )

Range.surroundContents( )

Range.toString( )

Select.focus( )

Select.onchange

Select.options[]

Select.remove( )

Table.createCaption( )

Table.createTFoot( )

Table.createTHead( )

Table.deleteCaption( )

Table.deleteRow( )

Table.deleteTFoot( )

Table.deleteTHead( )

Table.insertRow( )

TableRow.deleteCell( )

TableRow.insertCell( )

TableSection.deleteRow( )

TableSection.insertRow( )

Text.splitText( )

Textarea.blur( )

Textarea.focus( )

Textarea.onchange

Textarea.select( )

UIEvent.initUIEvent( )

Window.addEventListener( )

Window.alert( )

Window.attachEvent( )

Window.clearInterval( )

Window.clearTimeout( )

Window.close( )

Window.confirm( )

Window.defaultStatus

Window.detachEvent( )

Window.focus( )

Window.getComputedStyle( )

Window.moveBy( )

Window.moveTo( )

Window.onresize

Window.onunload

Window.print( )

Window.prompt( )

Window.removeEventListener( )

Window.resizeBy( )

Window.resizeTo( )

Window.scrollBy( )

Window.scrollTo( )

Window.setInterval( )

Window.setTimeout( )

XMLHttpRequest.abort( )

XMLHttpRequest.getAllResponseHeaders( )

XMLHttpRequest.getResponseHeader( )

XMLHttpRequest.onreadystatechange

XMLHttpRequest.open( )

XMLHttpRequest.send( )

XMLHttpRequest.setRequestHeader( )

XMLSerializer.serializeToString( )

XPathExpression

XPathExpression.evaluate( )

XPathResult.iterateNext( )

XPathResult.snapshotItem( )

XSLTProcessor.clearParameters( )

XSLTProcessor.getParameter( )

XSLTProcessor.importStylesheet( )

XSLTProcessor.removeParameter( )

XSLTProcessor.reset( )

XSLTProcessor.setParameter( )

XSLTProcessor.transformToDocument( )

XSLTProcessor.transformToFragment( )

Über den Autor

Über die Übersetzer

URL

Help

CanvasRenderingContext2D.drawImage( )

Zeichnet ein Bild

Überblick

void drawImage(Image bild, float x, float y)
void drawImage(Image bild, float x, float y,
        float breite, float hoehe)
void drawImage(Image bild, integer sourceX, integer sourceY,
               integer sourceBreite, integer sourceHoehe,
               float destX, float destY,
               float destBreite, float destHoehe)

Argumente

bild: Das zu zeichnende Bild. Dieses muss ein Image-Objekt sein, das ein <img>-Tag repräsentiert, oder auch ein Offscreen-Bild oder ein Canvas-Objekt.
x, y: Der Punkt, an dem die linke obere Ecke des Bildes gezeichnet wird.
breite, hoehe: Die Größe, in der das Bild gezeichnet werden soll. Die Spezifikation dieser Argumente skaliert das Bild.
sourceX, sourceY: Die linke obere Ecke der zu zeichnenden Bildregion. Diese ganzzahligen Argumente werden in Bildpixeln angegeben.
sourceBreite, sourceHoehe: Die Abmessungen der zu zeichnenden Bildregion, angegeben in Bildpixeln.
destX, destY: Die Canvas-Koordinaten, an denen die linke obere Ecke der Bildregion gezeichnet werden soll.
destBreite, destHoehe: Die Canvas-Dimensionen, mit denen die Bildregion gezeichnet werden soll.

Beschreibung

Bei dieser Methode gibt es drei Varianten. Bei der ersten Variante wird das gesamte Bild auf den Canvas kopiert: Die linke, obere Ecke wird auf den angegebenen Punkt gesetzt, und jeder Bildpixel wird auf eine Einheit im Canvas-Koordinatensystem abgebildet. Bei der zweiten Variante wird ebenfalls das gesamte Bild auf den Canvas kopiert, Sie können die gewünschte Breite und Höhe des Bildes jedoch in Canvas-Einheiten festlegen. Die dritte Variante ist ganz variabel: Mit ihr können Sie jede beliebige, rechteckige Bildregion festlegen und kopieren, wobei das Bild beliebig auf jeder Position im Canvas skaliert werden kann.

Das an diese Methode übergebene Bild muss ein Image- oder Canvas-Objekt sein. Ein Image-Objekt kann ein <img>-Tag im Dokument oder ein über den Image( )-Konstruktor erstelltes Offscreen-Bild repräsentieren.

Siehe auch

Image