Zeichnen Sie ein rotes Rechteck, ein Verlaufsrechteck, ein farbiges Rechteck und etwas farbigen Text auf die Leinwand.
Was ist Canvas?
HTML5
Mit Canva können Sie auf vielfältige Weise Pfade, Kästchen, Kreise und Zeichen zeichnen und Bilder hinzufügen.
Browser-Unterstützung
Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das
Erstellen Sie eine Leinwand (Canvas)
Eine Leinwand ist ein rechteckiges Feld auf einer Webseite, das durch das Element
Hinweis: Standardmäßig hat das
<canvas id="myCanvas" width="200" height="100"></canvas>
Tipp: Sie können mehrere
Verwenden Sie das Stilattribut, um Rahmen hinzuzufügen:
Beispiel
Verwenden Sie JavaScript, um Bilder zu zeichnen<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
Das Canvas-Element selbst verfügt nicht über die Funktion
Zeichnen. Alle Zeichenarbeiten müssen innerhalb von JavaScript durchgeführt werden: Instanz
Instanzanalyse:<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
Suchen Sie zunächst das
Dann erstellen Sie das Kontext-
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
Die folgenden zwei Codezeilen zeichnen ein rotes Rechteck:
Setzen Sie die fillStyle-Eigenschaft auf eine CSS-Farbe, einen Farbverlauf oder ein Muster. Die Standardeinstellung für fillStyle ist #000000 (schwarz).ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
Die Methode fillRect(x,y,width,height) definiert die aktuelle Füllmethode des Rechtecks.
Leinwandkoordinaten
Leinwand ist ein zweidimensionales Raster.
Die Koordinaten der oberen linken Ecke der Leinwand sind (0,0)
Die obige fillRect-Methode hat Parameter (0,0,150,75).
Bedeutet: Zeichnen Sie ein 150x75 großes Rechteck auf die Leinwand, beginnend in der oberen linken Ecke (0,0).
【Verwandte Empfehlungen】
1.
Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen 2.
Kostenloses h5-Online-Video-Tutorialphp.cn Original-HTML5-Video-TutorialDas obige ist der detaillierte Inhalt vonHTML5Canvas-Erklärung und Beispiel-Tutorials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!