Natürlich wird dadurch einfach ein Canvas-Objekt erstellt und keine Operationen daran ausgeführt. Zu diesem Zeitpunkt sieht das Canvas-Element nicht anders aus als das div-Element. Nichts auf der Seite. Kann ich nicht sagen :)
Darüber hinaus kann die Größe des Canvas-Elements über die Attribute width und height angegeben werden, was dem img-Element etwas ähnelt.
Der Kern von Canvas: Kontext
Wie bereits erwähnt, kann das Canvas-Objekt über JavaScript bedient werden, um Grafiken zu zeichnen, Bilder zu synthetisieren usw. Diese Vorgänge werden nicht über das Canvas-Objekt selbst ausgeführt. Dies erfolgt jedoch durch Abrufen des Canvas-Operationskontexts über eine Methode getContext des Canvas-Objekts. Mit anderen Worten: Wenn wir später das Canvas-Objekt verwenden, befassen wir uns mit dem Kontext des Canvas-Objekts, und das Canvas-Objekt selbst kann verwendet werden, um Informationen wie die Größe des Canvas-Objekts abzurufen.
Das Abrufen des Kontexts des Canvas-Objekts ist einfach. Rufen Sie einfach die Methode getContext des Canvas-Elements auf. Der einzige derzeit verfügbare Typwert ist 2d:
Die Peinlichkeit von Firefox 3.0.x
Obwohl Firefox 3.0.x das Canvas-Element unterstützt, ist es nicht in voller Übereinstimmung mit der Spezifikation implementiert. Die Methoden fillText und MeasureText werden in Firefox 3.0.x daher durch mehrere Firefox-spezifische Methoden ersetzt 3.0 Wenn Sie Canvas in .x verwenden, müssen Sie zunächst die Unterschiede zwischen diesen Methoden in verschiedenen Browsern beheben.
Der folgende Code stammt aus dem
Mozilla Bespin-Projekt, das die Inkonsistenz zwischen dem Context-Objekt von Canvas in Firefox 3.0.x und der HTML5-Spezifikation behebt:
function fixContext(ctx) {
// * Aktualisieren Sie die Textwiedergabe von Firefox 3.0.x auf den HTML 5-Standard
if (!ctx.fillText && ctx.mozDrawText) {
ctx.fillText = function( textToDraw, x, y, maxWidth) {
ctx.translate(x, y);
ctx.mozTextStyle = ctx.font;
ctx.mozDrawText(textToDraw); x, -y);
};
}
// * MeasureText einrichten
if (!ctx.measureText && ctx.mozMeasureText) {
ctx.measureText = function(text) {
if (ctx.font) ctx.mozTextStyle = ctx.mozMeasureText(text);
return { width: width }; 🎜>// * Setup html5MeasureText
if (ctx.measureText && !ctx.html5MeasureText) {
ctx.html5MeasureText = ctx.measureText;
ctx.measureText = function(text) {
var textMetrics = ctx.html5MeasureText(text);
// fake it 'til you make it
textMetrics.ascent = ctx.html5MeasureText("m").width;
return textMetrics; 🎜>}
// * für andere Browser, No-Op weg
if (!ctx.fillText) {
ctx.fillText = function()
}
if ( !ctx.measureText) {
ctx.measureText = function() {
}
return ctx;
Hinweis: Ab Opera 9.5 unterstützt Opera fillText und die zugehörigen Methoden und Eigenschaften des Canvas-Objekts in der HTML5-Spezifikation nicht mehr.
Hallo Canvas!
Nachdem wir zunächst etwas über Canvas verstanden hatten, begannen wir, unser erstes Canvas-Programm zu schreiben, einen weiteren Zweig des berühmten HelloWorld „Hello, Canvas“:
运行示例，Canvas 对象所在区域显示出„Hello, World!“，这正是代码中 ctx.fillText("Hello, World!", 20, 20); 的作用.
fillText 以及相关属性
fillText 方法用来在 Canvas 中显示文字，它可以接受四个参数，其中最后一个是可选的:
void fillText(in DOMString-Text, in Float x, in Float y, [Optional] in Float maxWidth);
其中 maxWidth 表示显示文字时最大的宽度, 可以防止文字溢出, 不过我在测试中发现在 Firefox 与 Chom re 中指定了 maxWidth 时也没有任何效果.
在使用 fillText 方法之前,可以通过设置Die Farbe „20pt Arial“ ist die beste Wahl für Sie看具体的效果.
二、路径
图形的基础 - 路径
在 Canvas其实就是往已经的 Kontext 路径集合中再添加一些路径点，在最后使用 Füllung.或.Strich.方法进行绘制时，都是依据这些路径点来进行填充或画线.
在每次开始绘制路径前，都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径,否则接下来绘制的路径会与之前绘制的路径叠加, 在填充或画边框时就会出现问题.Sie können es auch verwenden 。另外, 如果在填充时路径没有关闭, 那么 Context 会自动调用 closePath 方法将路径关闭。
基本路径方法
1. beginPath, closePath
这两个方法在前面已经介绍过，分别用来通知🎜>
在 Canvas方法，否则画出来的效果难看不说，还会严重影响性能.
在下面这张图中，左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径,而后面的图形则就只在绘制所有图形前调用了一次beginPath为每次使用 Strich 绘制边框时, 会把之前的路径再次绘制一遍, 叠加起来颜色就比原来深一些.
Wenn die Anzahl der Pfade im Kontext klein ist, ist die Leistung akzeptabel, wenn der Anzeigeeffekt nicht berücksichtigt wird. Wenn jedoch die Anzahl der Pfade im Kontext groß ist, wird beginPath nicht verwendet, bevor mit dem Zeichnen eines neuen Pfads begonnen wird , da bei jeder Zeichnung der vorherige Pfad neu gezeichnet werden muss und die Leistung exponentiell sinkt.
Daher
Sofern keine besonderen Anforderungen bestehen, muss beginPath jedes Mal aufgerufen werden, um einen neuen Pfad zu beginnen, bevor mit dem Zeichnen eines Pfads begonnen wird.
2. Bewegung und gerade Linie moveTo, lineTo, rect
void moveTo(in float x, in float y);
Beim Zeichnen eines Pfads in Canvas ist es im Allgemeinen nicht erforderlich, einen Startpunkt anzugeben. Der Standardstartpunkt ist der Endpunkt des zuletzt gezeichneten Pfads. Wenn Sie daher einen Startpunkt angeben müssen, müssen Sie diesen verwenden die moveTo-Methode, um die Position anzugeben, zu der verschoben werden soll.
void lineTo(in float x, in float y);
Die Methode lineTo zeichnet einen direkten Pfad zum angegebenen Speicherort. Nach dem Aufruf der lineTo-Methode wird der Startpunkt des Zeichnens innerhalb des Kontexts zum Endpunkt der geraden Linie verschoben.
void rect(in float x, in float y, in float w, in float h);
Mit der rect-Methode wird ein rechteckiger Pfad gezeichnet, wobei die Position, Breite und Höhe der oberen linken Ecke über Parameter angegeben werden. Nach dem Aufruf von rect verschiebt sich der Zeichenstartpunkt von Context in die obere linke Ecke des von rect gezeichneten Rechtecks.
Die
rect-Methode unterscheidet sich ein wenig von der später vorgestellten Arc-Methode und anderen Pfadmethoden. Sie verwenden Parameter, um den Startpunkt anzugeben, anstatt den intern vom Kontext verwalteten Startpunkt zu verwenden.
3. Kurve arcTo, arc, quadraticCurveTo, bezierCurveTo
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
Gemäß den Anweisungen des WHATWG-Dokuments besteht diese Methode darin, einen Bogentangenten an zwei Strahlen zu zeichnen, der durch den Kontext verläuft, und der Endpunkt ist (x1, y1). der andere geht durch (x2, y2), der Endpunkt ist (x1, y1), dieser Bogen ist der kleinste Bogen tangential zu diesen beiden Strahlen. Fügen Sie nach dem Aufruf der arcTo-Methode den Tangentenpunkt zwischen dem Bogen und dem Strahl (x1, y1)-(x2, y2) zum aktuellen Pfad als Ausgangspunkt für die nächste Zeichnung hinzu.
Bei Tests wurde festgestellt, dass Firefox und Opera diese Methode derzeit nicht gut unterstützen und nur Chrome und Safari 4 den richtigen Pfad zeichnen können.
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean gegen den Uhrzeigersinn);
Die
Bogenmethode wird verwendet, um einen Bogenpfad zu zeichnen, wobei die Position und Größe des Bogens durch die Mittelposition, den Anfangs- und Endbogenmaß angegeben wird. Diese Methode ist auch nicht vom Zeichnungsanfang abhängig Punkt, der von Context verwaltet wird. Die Drehrichtung beim Zeichnen eines Bogens wird durch den letzten Parameter gegen den Uhrzeigersinn angegeben. Wenn er wahr ist, ist er gegen den Uhrzeigersinn, und wenn er falsch ist, ist er im Uhrzeigersinn.
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
Die quadraticCurveTo-Methode wird zum Zeichnen eines quadratischen Spline-Pfads verwendet. Die Parameter cpx und cpy geben die Position des Kontrollpunkts an, x und y geben die Position des Endpunkts an und der Startpunkt ist der von verwaltete Zeichnungsstartpunkt Kontext.
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
Die bezierCurveTo-Methode wird zum Zeichnen eines Bezier-Kurvenpfads verwendet. Sie ähnelt quadraticCurveTo, aber die Bezier-Kurve hat zwei Kontrollpunkte, daher werden cp1x, cp1y, cp2x, cp2y in den Parametern verwendet, um die Positionen anzugeben zwei Kontrollpunkte, während x und y die Position des Büschels angeben.
4. Füllen, streichen, ausschneiden
Die beiden Methoden „Füllung“ und „Strich“ sind leicht zu verstehen und werden zum Füllen von Pfaden bzw. zum Zeichnen von Pfadlinien verwendet.
Die Clip-Methode wird verwendet, um einen Beschneidungsbereich für Canvas festzulegen. Der Code nach dem Aufruf der Clip-Methode ist nur für diesen festgelegten Beschneidungsbereich gültig und hat keine Auswirkungen auf andere Stellen. Diese Methode ist sehr nützlich, wenn Sie lokale Aktualisierungen durchführen. Standardmäßig ist der Beschneidungsbereich ein Rechteck mit der oberen linken Ecke bei (0, 0) und einer Breite und Höhe, die jeweils der Breite und Höhe des Canvas-Elements entsprechen.
Beim Zeichnen dieses Bildes wurde fillRect(0, 0, 100, 100) zwar zweimal verwendet, um ein 100x100-Rechteck zu füllen, das angezeigte Ergebnis ist jedoch, dass beim zweiten Mal nur ein kleiner Bereich in der Mitte gefüllt wurde Mit der Clip-Methode wird der Clipping-Bereich zwischen zwei Füllungen festgelegt, sodass die zweite Füllung nur den kleinen Bereich in der Mitte beeinflusst.
5. ClearRect, FillRect, StrokeRect
Diese drei Methoden sind keine Pfadmethoden, sondern werden zur direkten Verarbeitung des Inhalts auf der Leinwand verwendet, was dem Hintergrund der Leinwand entspricht. Der Aufruf dieser drei Methoden hat keinen Einfluss auf den Startpunkt der Kontextzeichnung.
Wenn Sie den gesamten Inhalt auf der Leinwand löschen möchten, können Sie context.clearRect(0, 0, width, height) direkt aufrufen, um ihn direkt zu löschen, anstatt die Pfadmethode zum Zeichnen eines rechteckigen Pfads desselben zu verwenden Wählen Sie die Größe der Leinwand aus und verwenden Sie dann die Füllmethode „Gehe leer“.
Fazit
Über die Pfadmethode von Canvas können Sie mit Canvas einige einfache Vektorgrafiken verarbeiten, sodass diese beim Skalieren nicht verzerrt werden. Allerdings ist die Pfadmethode von Canvas nicht sehr leistungsfähig, zumindest verfügt sie nicht einmal über einen elliptischen Pfad ...
Referenzen 1.
Das Canvas-Element, WHATWG
