Alle HTML5 Befehle auf einer tollen Infografik inkl. Copy & Paste ✓ – drela®

Neue HTML 5 - Tags

Exisitierende HTML5 Tags

Alte nicht unterstützte Tags

<Globale Attribute>

Neue
HTML 5 Attribute

Existierende
HTML 5 Attribute

Keyboard

Mouse

Fenster

Formular

Media

HTML 5 Canvas (Leinwand)

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.

Canvas Element

Attribute

Name	Typ	Default
width	unsigned long	300
height	unsigned long	150

Methoden

Ausgabe	Name
string	toDataURL( [Optional] string type, [Variadic] any args)
object	getContext9 string contextId)

2D Kontext

Attribute

Name	Typ
canvas	HTMLCanvasObject [readonly]

Methoden

Ausgabe	Name
void	save()
void	restore()

Umwandlung

Methoden

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)

Bild Zeichnung

Methoden

Ausgabe	Name
void	drawImage( Object image, float dx, float dy [Optional] float dw, float dh)

Farben, Stile und Schatten

Attribute

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

Methoden

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]

Canvasgradient Interface

Ausgabe	Name
void	addColorStop(float offset, string color)

Pfade

Methoden

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)

Pixel Manipulation

Methoden

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)

ImageData Schnittstelle

width	unsigned long [readonly]
height	unsigned long [readonly]
data	CanvasPixelArray [readonly]

Canvas Element

Attribute

Name	Typ	Default
globalAlpha	float	1
globalCompositeOperation	string	source-over

Unterstützt alle folgenden Werte

source-over
source-in
source-atop
source-out
destination-atop
destination-in
destination-out
destination-atop
lighter
XOR
copy
darker

Linien Stile

Attribute

Name	Typ	Default
lineWidth	float	1
lineCap	string	Butt

Unterstützt alle folgenden Werte

butt
lineJoin
rounded
String
square
miter

Unterstützt alle folgenden Werte

round
miterLimit
bevel
float
miter
10

Text

Attribute

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

Methoden

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)

TextMetrics Schnittstelle

width	float [readonly]

Rechtecke

Methoden

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)

Infographic By drela.de/html5

Drela - Webdesign Agentur Frankfurt HEWO Internetmarketing

Teilen Sie dieses Bild auf Ihrer Seite

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

Neue HTML 5 - Tags

<article>

<aside>

<audio>

<bdi>

<canvas>

<command>

<datalist>

<datatemplate>

<datagrid>

<details>

<dialog>

<embed>

<figcaption>

<figure>

<footer>

<header>

<hgroup>

<keygen>

<main>

<menuitem>

<mark>

<meter>

<nav>

<output>

<progress>

<rb>

<rp>

<rt>

<rtc>

<ruby>

<section>

<source>

<summary>

<template>

<time>

<track>

<video>

<wbr>

Exisitierende HTML5 Tags

<!doctype>

<a>

<abbr>

<address>

<area>

<b>

<base>

<bdo>

<blockquote>

<body>

<br>

<button>

<caption>

<cite>

<code>

<col>

<colgroups>

<dd>

<del>

<div>

<dfn>

<dl>

<dt>

<em>

<fieldset>

<form>

<h1> to <h6>

<head>

<hr>

<html>

<i>

<iframe>

<img>

<input>

<ins>

<kbd>

<label>

<legend>

<li>

Neue
HTML 5 Attribute

Existierende
HTML 5 Attribute