Das beste HTML-DOM Canvas-Objekt-Tutorial im Jahr 2024. In diesem Tutorial können Sie
Canvas-Objekt,Farbe, Stil und Schatten,Linienstil,Rechteck,Weg,Veränderung,Text,Bild-Rendering,Pixel-Operationen,Synthese,andere,Standard-Eigenschaften und Ereignisse,In Verbindung stehende Artikel, lernen
HTML-DOM Canvas-Objekt
Canvas-Objekt
Canvas-Objekt ist neu in HTML5.
HTML5 <canvas> -Tag wird verwendet, um ein Bild zu zeichnen (ein Skript ist in der Regel JavaScript).
Canvas Object Access
Sie können getElementById () verwenden, um die <canvas> -Element für den Zugriff auf:
var x = document.getElementById("myCanvas");
尝试一下
Erstellen Sie ein Canvas-Objekt
Sie können die document.createElement () -Methode verwenden, um ein <canvas> -Element zu erstellen:
var x = document.createElement("CANVAS");
尝试一下
Hinweis: <canvas> -Element selbst nicht über die Fähigkeit zu ziehen (es ist nur eine grafische Container) - Sie müssen ein Skript verwenden , um die eigentliche Zeichnung Aufgabe zu tun.
getContext () Methode gibt ein Objekt, das zum Zeichnen auf der Leinwand Methoden und Eigenschaften zur Verfügung stellt.
Dieses Handbuch bietet eine komplette getContext Eigenschaften und Methoden ( "2D") Objekt, das verwendet werden kann, Text, Linien, Rechtecke, Kreise, etc. auf der Leinwand zu zeichnen.
Farbe, Stil und Schatten
Linienstil
Rechteck
Weg
Veränderung
Text
Bild-Rendering
Pixel-Operationen
属性 |
描述 |
width |
返回 ImageData 对象的宽度。 |
height |
返回 ImageData 对象的高度。 |
data |
返回一个对象,其包含指定的 ImageData 对象的图像数据。 |
Synthese
andere
方法 |
描述 |
save() |
保存当前环境的状态。 |
restore() |
返回之前保存过的路径状态和属性。 |
createEvent() |
|
getContext() |
|
toDataURL() |
|
Standard-Eigenschaften und Ereignisse
Canvas - Objekt unterstützt auch die Standard - Attribute und Ereignisse .
In Verbindung stehende Artikel
HTML - Tutorial: HTML <Canvas> Element