Die abgebildtete Grafik darf unverändert und unter Angabe und Verlinkung der Quelle https://www.drela.de/html5-befehle.html verwendet werden!
Diese HTML5 Übersicht und weitere nützliche Freebies findet Ihr auch bei t3n.de
Weitere Artikel:
Das HTML <canvas> Element wird verwendet, um Grafiken durch Skripte (meist JavaScript) direkt zu zeichnen. Das <canvas>-Element ist nur ein Container für Grafiken. Sie müssen ein Skript verwenden, um die Grafiken tatsächlich zu zeichnen.
Der Canvas hat zahlreiche Methoden um Boxen, Kreise, Pfade, Text und Images hinzuzufügen.
Name | Typ | Default |
---|---|---|
width | unsigned long | 300 |
height | unsigned long | 150 |
Ausgabe | Name |
---|---|
string | toDataURL( [Optional] string type, [Variadic] any args) |
object | getContext9 string contextId) |
Name | Typ |
---|---|
canvas | HTMLCanvasObject [readonly] |
Ausgabe | Name |
---|---|
void | save() |
void | restore() |
Ausgabe | Name |
---|---|
void | scale(float x, float y) |
void | rotate(flaot x, float y) |
void | transform( float m11, float m12, float m21, float m22, float dx, float dy) |
void | setTransform( float m11, float m12, float m21, float m22, float dx, float dy) |
Ausgabe | Name |
---|---|
void | drawImage( Object image, float dx, float dy [Optional] float dw, float dh) |
Name | Type | Default |
---|---|---|
strokeStyle | any | black |
fillStyle | any | black |
shadowOffsetX | float | 0.0 |
shadowOffsetY | float | 0.0 |
shadowBlur | float | 0.0 |
shadowColor | string | transparent black |
Ausgabe | Name |
---|---|
CanvasGradient | createLinearGradient( float x0, float y0, float r0, float x1, float y1, float r1) |
CanvasGradient | createPattern( object image, string repetition) |
Der Befehl "image" kann als Typ HTMLImageElement, HTMLCanvasElement oder HTMLVideoElement sein. "repetition" unterstützt die folgenden Werte: [repeat (default, repeat-x, repeat-y, no-repeat]
Ausgabe | Name |
---|---|
void | addColorStop(float offset, string color) |
Ausgabe | Name |
---|---|
void | beginPath() |
void | closePath() |
void | fill() |
void | stroke() |
void | clip() |
void | moveTo(float x, float y) |
void | lineTo(float x, float y) |
void | quadraticCurveTo( float cpx, float cpy, float x, float y) |
void | bezierCurveTo( float cp1x, float cp1y, float cp2x, float cp2y, float x, float y) |
void | arcTo( float x1, float y1, float x2, float y2, float radius) |
void | arc( float x1, float y1, float radius, float startAngle, float endAngle, boolean anticlockwise) |
void | rect(float x, float w, float h) isPointInPath(float x, float y) |
Ausgabe | Name |
---|---|
ImageData | createImageData(float sw, float sh) |
CanvasGradient | createImageData( ImageData |
Imagedata) ImageData Void | getImageData( ImageData imagedata, float dx, float dy, [Optional] float dirtyX, float dirtyY, float dirtyWidth, float dirtyHeight) |
width | unsigned long [readonly] |
height | unsigned long [readonly] |
data | CanvasPixelArray [readonly] |
Name | Typ | Default |
---|---|---|
globalAlpha | float | 1 |
globalCompositeOperation | string | source-over |
source-over
source-in
source-atop
source-out
destination-atop
destination-in
destination-out
destination-atop
lighter
XOR
copy
darker
Name | Typ | Default |
---|---|---|
lineWidth | float | 1 |
lineCap | string | Butt |
butt
lineJoinrounded
Stringsquare
miterround
miterLimitbevel
floatmiter
10Name | Typ | Default |
---|---|---|
font | string | 10px sans-serif |
TextAlign | string | start |
Unterstützt alle folgenden Werte: [start, end, left, right, center]
textBaselin | string | alphabetic |
Unterstützt alle folgenden Werte: [top, hanging, middle, alphabetic, ideographic, bottom]
Ausgabe | Name |
---|---|
void | fillText( string text, float x, float y, [Optional] float maxWidtd) |
void | strokeText( string text, float x, float y, [Optional] float maxWidtd) |
TextMetrics | measureText(string text) |
width | float [readonly] |
Ausgabe | Name |
---|---|
void | clearRect(float x, float y, float w, float h) |
void | fillRect(float x, float y, float w, float h) |
TextMetrics | strokeRect(float x, float y, float w, float h) |
Die abgebildtete Grafik darf unverändert und unter Angabe und Verlinkung der Quelle https://www.drela.de/html5-befehle.html verwendet werden!
Diese HTML5 Übersicht und weitere nützliche Freebies findet Ihr auch bei t3n.de
Weitere Artikel: