Lernen Sie HTML5 beim Spielen (1) – Ausführliche Erklärung der Leinwand

width="750">

一、canvas>标签 Html5 引入了一个新的 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢? 新闻链接：Google声称Chrome7浏览器将提速60倍 <canvas>标签的用法非常简单，如下： <canvas id="tutorial" width="150" height="150" style="background-color:red;"> 你的浏览器不支持 Canvas 标签</canvas> 标签和普通的 HTML 标签没有多大的区别，你可以设置它的宽度和高度，可以通过 CSS 设置它的背景色、边框样式等等。你可以在 这里 找到关于 标签的更多内容。 标签中间的内容是替换内容，如果用户的浏览器不支持 标签，这段内容就会被显示出来；如果用户的浏览器支持 标签，则这段内容将被忽略。

1.<canvas

>-Tag

Html5

führt ein neues -Tag ein. Der durch dieses Tag dargestellte Bereich ist einfach wie ein Auf dieser Leinwand werden schließlich alle Ihre grafischen Zeichnungen präsentiert. Mit diesem Tag wurde der grafische Ausdruck des Browsers erheblich verbessert. Fühlen Sie sich durch Flash und SilverLight bedroht?News-Link: Google behauptet, dass der Chrome 7-Browser 60-mal schneller sein wird

Es gibt keinen großen Unterschied zwischen gewöhnlichen HTML-Tags. Sie können die Breite und Höhe, die Hintergrundfarbe, den Rahmenstil usw. über CSS festlegen. Weitere Informationen zum -Tag finden Sie

hier. Der Inhalt in der Mitte des -Tags ist

Ersatzinhalt

Wenn der Browser des Benutzers das < nicht unterstützt. Canvas>-Tag, der Inhalt wird angezeigt; wenn der Browser des Benutzers das -Tag unterstützt, wird dieser Inhalt ignoriert.

Der obige -Anzeigeeffekt ist wie folgt:

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

Wenn Sie den

IE-Browser

verwenden, ist dies möglicherweise nur möglich Sehen Sie es sich an. Wenn Sie Google Chrome oder

Firefox verwenden, können Sie einen roten quadratischen Bereich sehen.

2. Rendering-Kontext Tatsächlich können wir mit dem Programmieren< nichts anfangen 🎜> Die Schüler wissen alle, dass zum

Zeichnen

zunächst ein Gerätekontext benötigt wird. Zum Zeichnen auf dem -Tag müssen unsere Grafiken nicht direkt auf den Bildschirm gezeichnet werden , wird es zuerst in den Kontext gezogen und dann auf dem Bildschirm aktualisiert.

Off-Topic: Warum müssen wir ein so kompliziertes Konzept wie „Kontext“ erstellen? Aufgrund des Kontextobjekts

var canvas = document.getElementById('tutorial'); 
if (canvas.getContext){ 
    alert("支持 <canvas> 标签"); 
} else { 
    alert("不支持 <canvas> 标签");

können wir dafür sorgen, dass verschiedene Grafikgeräte in unseren Augen gleich aussehen. Wir müssen uns nur auf das Zeichnen konzentrieren und die andere Arbeit dem Betriebssystem und dem Browser überlassen Um es ganz klar auszudrücken: Es bedeutet, alle möglichen konkreten Dinge in einheitliche Abstraktionen umzuwandeln und dadurch unsere Belastung zu verringern. Das Abrufen des Kontexts ist sehr einfach. Sie benötigen nur die folgenden zwei Codezeilen: Rufen Sie zuerst das Canvas-Objekt ab und rufen Sie dann die getContext-Methode des Canvas auf Objekt. Diese Methode kann derzeit nur als Parameter „2d“ übergeben werden. In naher Zukunft unterstützt er möglicherweise den Parameter „3d“. Sie müssen verstehen, was das bedeutet, freuen wir uns darauf. Die getContext-Methode gibt ein CanvasRenderingContext2D-Objekt zurück, das das Rendering-Kontextobjekt ist. Weitere Informationen dazu finden Sie hier, welche einige Zeichenmethoden sind. 3. Browser-Unterstützung Zusätzlich zur Anzeige alternativer Inhalte auf nicht unterstützten Browsern können wir auch Skripte verwenden, um zu überprüfen, ob der Browser Canvas unterstützt Die Methode ist sehr einfach. Stellen Sie einfach fest, ob die Funktion getContext vorhanden ist. Der Code lautet wie folgt:

Das obige ist der detaillierte Inhalt vonLernen Sie HTML5 beim Spielen (1) – Ausführliche Erklärung der Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!