Lernen Sie beim Spielen mit HTML5 (1) Canvas-Implementierungsmethode _HTML5-Tutorial-Fähigkeiten

1. -Tag
Html5 führt einen neuen -Tag ein. Alle Ihre Grafikzeichnungen werden angezeigt auf dieser Leinwand. Mit diesem Tag wurde die Grafikleistung des Browsers erheblich verbessert.

News-Link: Google behauptet, dass der Chrome 7-Browser 60-mal schneller sein wird Die Verwendung des -Tags ist wie folgt sehr einfach:

Kopieren Sie den Code

Der Code lautet wie folgt :

Ihr Browser unterstützt den Canvas nicht tag

Tags können ihre Breite und Höhe sowie die Hintergrundfarbe und den Rand festlegen Stil usw. über CSS warten.

Mehr zum -Tag finden Sie
hier
. Der Inhalt in der Mitte des

-Tags ist der Ersatzinhalt. Wenn der Browser des Benutzers das -Tag unterstützt, wird dieser Inhalt angezeigt , dann wird dieser Inhalt angezeigt. Der Inhalt des Abschnitts wird ignoriert. Der obige -Code wird wie folgt angezeigt:

Ihr Browser unterstützt das Canvas-Tag nicht

Wenn Sie einen IE-Browser verwenden, ist dies möglicherweise nur möglich Sehen Sie sich einen Tipp an. Wenn Sie Google Chrome oder Firefox verwenden, wird ein roter quadratischer Bereich angezeigt.

2. Rendering-Kontext

Tatsächlich können wir mit dem Tag nichts anfangen, das wissen wir alle, bevor wir in Windows zeichnen muss zuerst einen Gerätekontext-DC abrufen. Das Zeichnen auf dem -Tag erfordert auch zuerst das Abrufen eines Rendering-Kontexts. Unsere Grafiken werden nicht direkt auf den Bildschirm, sondern zuerst auf den Kontext (Context) gezeichnet und dann auf dem Bildschirm aktualisiert. .
Off-Topic: Warum müssen wir ein so kompliziertes Konzept wie „Kontext“ erstellen? Aufgrund des Kontextobjekts 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 das Betriebssystem und den Browser um andere Aufgaben kümmern Konkrete Dinge in einheitliche Abstraktionen umzuwandeln und so unsere Belastung zu verringern. Das Abrufen des Kontexts ist sehr einfach. Sie benötigen lediglich die folgenden zwei Codezeilen: var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); 🎜>Holen Sie sich zuerst das Canvas-Objekt und rufen Sie dann die getContext-Methode des Canvas-Objekts auf. In naher Zukunft kann es sein, dass es den Parameter „3d“ unterstützt das heißt, 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 in 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, bestimmen Sie einfach Unabhängig davon, ob die getContext-Funktion vorhanden ist, lautet der Code wie folgt:



Kopieren Sie den Code

Der Code lautet wie folgt: var canvas = document.getElementById('tutorial'); if (canvas.getContext){

alert("Unterstützt tag");

alert(" Tag wird nicht unterstützt"

}



四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出

<canvas style="background-color: black" id="move_line" height="200" width="400">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('move_line'); var ctx=canvas.getContext("2d"); //上下移动的直线 var width=400; var height=200; var y=0 var dir=1; ctx.strokeStyle = "rgb(255,0,0)"; function draw(){ ctx.clearRect(0,0,width,height) ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(width-1,y); ctx.stroke(); y=y+dir; if((y==0)||(y==(height-1))) dir=dir*(-1); } </script><p><input onclick="interval=setInterval(draw,10);" value="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button">
提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器