Welches Element in HTML5 kann Grafiken zeichnen?

Elemente, die Grafiken in HTML5 zeichnen können: 1. „canvas“-Element, das Grafiken dynamisch über JavaScript-Skripte zeichnen kann 2. „SVG“-Element, das vektorbasierte Grafiken für das Netzwerk definieren kann, wobei das XML-Format zum Definieren von Grafiken verwendet wird .

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML5 Canvas und SVG ermöglichen beide das Erstellen von Grafiken im Browser, unterscheiden sich jedoch grundlegend.

SVG

• SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet.

• SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können einem Element einen JavaScript-Ereignishandler hinzufügen.

• In SVG wird jede gezeichnete Form als Objekt betrachtet. Ändern sich die Eigenschaften eines SVG-Objekts, kann der Browser die Grafik automatisch reproduzieren.

Canvas

• Canvas zeichnet 2D-Grafiken über JavaScript.

• Canvas wird Pixel für Pixel gerendert.

• Sobald die Grafik im Canvas gezeichnet ist, erhält sie nicht mehr die Aufmerksamkeit des Browsers. Wenn sich die Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von Grafiken verdeckt wurden.

1. Canvas

canvas ist ein neues HTML5-Tag in HTML5 und eine Javascript-API für den Betrieb von Canvas. Es kann dynamische 2D- und 3D-Bildtechnologie in Webseiten realisieren. Ein wichtiger Unterschied zwischen dem -Markup und SVG und VML besteht darin, dass über eine JavaScript-basierte Zeichen-API verfügt, während SVG und VML ein XML-Dokument zur Beschreibung des Zeichnens verwenden. SVG-Zeichnungen lassen sich leicht bearbeiten und generieren, sind jedoch deutlich weniger leistungsstark.

Canvas kann Animationen, Spiele, Diagramme, Bildverarbeitung und andere Funktionen ausführen, für die ursprünglich Flash erforderlich war.

1. Leinwand erstellen

rrree

Breite und Höhe am besten im Tag selbst festlegen. Wenn Sie die Breite und Höhe auf andere Weise festlegen, ergibt sich ein Verschiebungsunterschied von 0,5

<canvas  id="draw" width="600" height="600"></canvas>

2. Zeichnen

var draw=document.getElementById("draw");
//获取画布元素
var draws=draw.getContext("2d");
//给画布一个绘制环境，2d表示在2d环境下绘制
//draws返回的是一个对象

3. Verstehen Sie einige Canvas-Methoden

//绘制线条

//设置线宽
draws.lineWidth = 10;
//设置线的颜色
draws.strokeStyle = "blue";
            
draws.moveTo(0,0);  //移动画笔到0,0点
draws.lineTo(300,300);  //画线到300,300的位置
draws.stroke();  //执行描边

//绘制矩形
draws.strokeRect(x,y,width,height) //绘制一个边框矩形
draws.fillRect(x,y,width,height) //绘制一个填充矩形

draws.clearRect(x,y,width,height) //清除一个矩形


//绘制圆形
draws.arc(x,y,radius,startAngle,endAngle,anticlockwise)
//arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、
//endAngle为终止弧度来，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，
//如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

//绘制图像 
//在html中加入一个img标签 
<img src="1.jpg" id="pic"/>
//在JS中...
//需要将页面中的图片都加载完之后执行
window.onload=function(){



//绘制文字

//描边文字
draws.font="50px microsoft yahei"

//设置描边字体颜色
draws.strokeText("Hello",20,100) 

//设置描边文字内容，和X坐标Y坐标

//填充文字

draws.fillStyle="red"
//设置填充字体颜色
draws.fillText("Hello",20,200); 

//设置填充文字内容，和X坐标Y坐标

2. SVG Scalable Vector Graphics basiert auf Extensible Markup Language (XML) und wird zur Beschreibung zweidimensionaler Vektorgrafiken verwendet . Grafisches Format. SVG ist ein neues zweidimensionales Vektorgrafikformat, das im August 2000 vom W3C („World Wide Web ConSortium“ oder „International Internet Standards Organization“) formuliert wurde. Es ist auch der Netzwerk-Vektorgrafikstandard in der Spezifikation. SVG folgt strikt der XML-Syntax und verwendet eine Beschreibungssprache im Textformat zur Beschreibung von Bildinhalten. Daher handelt es sich um ein Vektorgrafikformat, das unabhängig von der Bildauflösung ist. SVG wurde am 14. Januar 2003 zu einer W3C-Empfehlung.

Eigenschaften:

1. Beliebige Skalierung

Benutzer können die Bildanzeige beliebig skalieren, ohne die Klarheit, Details usw. des Bildes zu zerstören.

2. Text ist unabhängig

Der Text im SVG-Bild ist unabhängig vom Bild und der Text bleibt bearbeitbar und durchsuchbar. Es gibt keine Schriftarteinschränkungen mehr. Auch wenn eine bestimmte Schriftart nicht auf dem System des Benutzers installiert ist, wird ihm genau derselbe Bildschirm angezeigt, den er beim Erstellen hatte.

3. Kleinere Dateien

Im Allgemeinen sind SVG-Dateien viel kleiner als solche im GIF- und JPEG-Format, sodass sie schnell heruntergeladen werden können.

4. Super Anzeigeeffekt

SVG-Bilder haben immer klare Kanten auf dem Bildschirm und ihre Klarheit ist für jede Bildschirmauflösung und Druckauflösung geeignet.

5. Super Farbkontrolle

SVG-Bilder bieten eine Palette von 16 Millionen Farben und unterstützen ICC-Farbprofilstandards, RGB, Linien-X-Füllung, Farbverlauf und Maske.

6. Interaktion und Intelligenz. Eines der Hauptprobleme von SVG besteht darin, mit Flash zu konkurrieren, einem Vektorgrafikformat, das bereits einen wichtigen Marktanteil einnimmt. Das andere Problem ist der Grad der Herstellerunterstützung für SVG in seiner lokalen Betriebsumgebung.

Browser-Unterstützung:

Internet Explorer9, Firefox, Google Chrome, Opera und Safari unterstützen alle SVG.

IE8 und frühere Versionen erfordern ein Plug-in – beispielsweise den Adobe SVG Browser, der kostenlos erhältlich ist.

1. Einführungsmethode

Methode 1:

draws.beginpath()
draws.closepath()
// 二者同时出现  将绘制路径闭合 ,自动将路径闭合


draws.save()
draws.restore()
//二者成对出现 中间的属性样式只影响内部 不影响外部


//translate()
draws.strokeRect(0, 0, 150, 150);

draws.translate(150, 150);

draws.strokeRect(0, 0, 150, 150); //被平移的元素
//平移后这个被平移的元素的坐标就会改变


//rotate()

draws.rotate(0.2);

draws.strokeRect(75, 75, 75, 75); //根据画布的0，0点旋转

xmlns: Namespace
Version: Version
Methode 2:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
绘制图形
</svg>

2. Zeichnen

<img src="01.svg" alt="">

Verwandte Empfehlungen: 《 HTML-Video-Tutorial

》

Das obige ist der detaillierte Inhalt vonWelches Element in HTML5 kann Grafiken zeichnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!