Canvas-API, beliebte Canvas-Grundlagen (2)

Oben haben wir über das Zeichnen einer Linie, das Zeichnen eines Rechtecks ​​und das Schreiben von Text gesprochen. Wenn Sie es noch nicht gelesen haben, gehen Sie zuerst nach links Gehen Sie hier auf die Details ein. Schauen wir uns als Nächstes einige komplexere Eigenschaften und Methoden an!

Bevor ich darüber spreche, möchte ich es noch überprüfen. Schließlich gibt es ein paar Attribute, die ich oben nicht erwähnt habe, also beginnen wir mit dem Zeichnen eines Dreiecks!

Wenn Sie das oben Gesagte lesen, wird der kluge junge Mann bestimmt denken, dass ein Dreieck so einfach ist, dass es nur einen Punkt mehr als eine gerade Linie ist, also begann der junge Mann damit:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.stroke();

Oh, warum ist es eine Polylinie? Hat ein Dreieck nicht nur drei Punkte? Liegt es daran, dass es nicht geschlossen ist? Dann möchte ich noch einen Punkt hinzufügen:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.stroke();

Haha, ich bin tatsächlich genauso witzig wie du! Diese Idee ist tatsächlich die richtige Lösung. Tatsächlich gibt es eine andere Möglichkeit, Dreiecke zu zeichnen, die nur 3 Punkte erfordert:

closePath() schließt das path

Wenn sie geschlossen sind, sind sie im Allgemeinen paarweise

beginPath() start path

Die Verwendung dieses Paares lebender Schätze ist Im Allgemeinen:

ctx.beginPath();

ctx.closePath();

Beginnen Sie zuerst mit der Straße Jin, schreiben Sie den Inhalt, den Sie zeichnen möchten, und beenden Sie dann die Straße Jin, was einer versiegelten Box entspricht. Der Vorteil davon ist dass dadurch Stilverunreinigungen während des Zeichenvorgangs vermieden werden können. Sie wissen nicht, wie Sie sie verunreinigen können? Nun, schauen Sie unten:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.stroke();
//第二个三角
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
ctx.lineTo(150,50);
ctx.stroke();

Wie im Bild gezeigt, wenn ich ursprünglich wollte, dass die Farbe des ersten Dreiecks rot und das zweite grün ist, aber jetzt sind die Ergebnisse alle grün, und Die Augen sind scharf. Meine Klassenkameraden sahen auch, dass sich das erste Dreieck anfühlte, als hätte es zwei Farben, und die Farbe war sehr dunkel. Es fühlte sich an, als wären zwei übereinander gestapelte Dreiecke. Okay, ändern wir es, Sie sehen es:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
//ctx.stroke();
//第二个三角
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
//ctx.lineTo(150,50);
ctx.stroke();

Zeichnen wir nicht das erste Dreieck und auch nicht die linke Seite des zweiten Dreiecks und werfen Sie dann einen Blick darauf:

Nein. Ein Dreieck wird nicht mehr zweimal gezeichnet, einmal rot und einmal grün. Das ist auch nicht das, was wir wollen !

Dann lasst uns das Paar lebender Schätze nutzen, um zu sehen:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
//第一个三角
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.closePath();
ctx.stroke();
//第二个三角
ctx.beginPath();
ctx.strokeStyle='green';
ctx.moveTo(150,50);
ctx.lineTo(200,100);
ctx.lineTo(150,200);
ctx.lineTo(150,50);
ctx.closePath();
ctx.stroke();

Das ist es, was wir wollen, du spielst deins, ich spiele meins, ohne einander zu stören, (du hast gesagt, Du Ich brauche nur 3 Punkte, um ein Dreieck zu zeichnen, prahlen Sie mit B, Sie sehen, Sie verwenden 4 Punkte), oh, richtig.

Die Methode closePath() erstellt einen Pfad vom aktuellen Punkt zum Startpunkt. Dies ist eine Beschreibung dieser Methode. Das heißt, mit dieser Methode können Sie den Pinsel an die Position von beginPath bewegen (), damit Beenden Sie die Leinwand. Nach dieser Theorie verwenden wir beim Zeichnen eines Dreiecks beim Zeichnen bis zum dritten Punkt die Methode closePath (), um den Pinsel zum Startpunkt zurückzubringen, und zeichnen dann die Linie Sehen wir uns den Effekt an:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(50,200);
ctx.closePath();
ctx.stroke();

Sehen Sie, es gibt nur drei Punkte, keine Polylinien, oder? Sie können diese Fähigkeit auf jedes Fächerdiagramm oder jede unregelmäßige Grafik anwenden, über die ich später sprechen werde perfekt!

Hey, es ist nichts weiter als das. Ihre Linien sind alle ein Pixel und sie können nicht mit Sun Wukongs goldenem Knüppel identisch sein. Er muss größer und kleiner sein und er muss kleiner sein kleiner. Huh, wer hat das gesagt? Ich habe eine magische Waffe in der Hand, du bist unbesiegbar!

Meine Zauberwaffe ist:

lineWidth legt die aktuelle Linienbreite fest oder gibt sie zurück
Wie verwende ich
? Bruder gibt mir einen goldenen Knüppel:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
vartimer=null;
varnum=1;
ctx.moveTo(150,50);
ctx.strokeStyle='gold';
setInterval(function(){
if(num==100){
clearInterval(timer);
num=1;
}else{
num++;
};
ctx.lineTo(150,100+num*2);
ctx.lineWidth=num;
ctx.stroke();
},100)

Goldener Knüppel, groß, groß, groß, groß, größer, hahaha~~~
Ähm, sei im Ernst, da ist diese magische Waffe, die wir modifizieren können Die Linienbreite von Drahtmodellen und Linien, wie z. B. hohlen Dreiecken und leeren Rechtecken. Fragen Sie mich natürlich nicht nach hohlen Texten.
In Bezug auf Linien gibt es zwei weitere Attribute:
lineJoin-Eckentyp, bei dem sich zwei Linien schneiden
Parameter:
Gehrung: Standardeinstellung für scharfe Ecken
Bevel: Abschrägung
Rund: abgerundete Ecke

Was meinst du damit? Verwenden Sie es. Nehmen Sie das hohle Rechteck als Beispiel:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.beginPath();
ctx.lineJoin='miter';
ctx.strokeRect(100,10,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin='round';
ctx.strokeRect(100,110,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin='bevel';
ctx.strokeRect(100,210,80,80);
ctx.closePath();

Die rechte Seite ist der Polylinieneffekt

Beim Polylinieneffekt gibt es auch ein Attribut:

miterLimit gibt das Maximum an Gehrungslänge. Was ist die Bedeutung? Schauen Sie sich das Liniendiagramm rechts an. Die untere Gruppe scharfer Ecken wird als Gehrung bezeichnet. Die gängige Bedeutung besteht darin, die Länge der scharfen Ecke anzugeben normal angezeigt werden. Wenn es größer als der Wert ist, wird ein Teil davon abgeschnitten und seine Form ist dieselbe wie lineJoin='bevel'. Diese Methode funktioniert nur, wenn der Standardwert von lineJoin="miter" festgelegt ist . Lassen Sie mich ein Beispiel geben:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.beginPath();
ctx.miterLimit=19;
ctx.moveTo(20,20);
ctx.lineTo(150,27);
ctx.lineTo(20,34);
ctx.stroke();

ctx.beginPath();
ctx.miterLimit=18;
ctx.moveTo(20,120);
ctx.lineTo(150,127);
ctx.lineTo(20,134);
ctx.stroke();

ctx.beginPath();
ctx.lineJoin="bevel";
ctx.moveTo(20,220);
ctx.lineTo(150,227);
ctx.lineTo(20,234);
ctx.stroke();

Wenn der Wert von mitreLimit größer oder gleich 19 ist, werden die scharfen Ecken normal angezeigt Als 18 werden die scharfen Ecken abgeschnitten. Der Effekt ist derselbe wie beim Setzen von lineJoin='bevel'. Ich weiß noch nicht, welchen Effekt das haben wird, ich werde es später herausfinden!

Noch einer:
lineCap legt den Endpunktstil der Linie fest oder gibt ihn zurück. Hinweis: Dies dient zum Festlegen der Linie!
Parameter:
Hintern-Standard. Fügen Sie an jedem Ende der Linie gerade Kanten hinzu.
rund fügt an jedem Ende der Leitung abgerundete Drahtkappen hinzu.
Quadrat fügt an jedem Ende der Linie eine quadratische Linienkappe hinzu.
Was bedeutet das? Was die Linien betrifft, nehmen wir als Beispiel den goldenen Knüppel. Vergessen wir ihn, verwenden wir Linien (ich möchte lachen, wenn ich den goldenen Knüppel sehe); besser als das Eine sollte länger sein, wie viel länger? Zeichne ein Bild zur Veranschaulichung:

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.lineWidth=10;
ctx.beginPath();
ctx.lineCap='butt';
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.stroke();

ctx.beginPath();
ctx.lineCap='round';
ctx.moveTo(50,100);
ctx.lineTo(200,100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap='square';
ctx.moveTo(50,150);
ctx.lineTo(200,150);
ctx.stroke();

圆角和方脚的原理其实是这样的，很明显多出的一部分的宽度就是线条的一半的长度，所以要精确计算其长度，此小细节需谨记！

现在我们来讲讲画圆及其相关的图形：

arc(x,y,r,sAngle,eAngle,counterclockwise)

什么意思？x,y表示坐标点表示圆心坐标，r表示半径，sAngle表示开始弧度，eAngle表示结束弧度，counterclockwise表示顺时针还是逆时针方式，默认为顺时针false，逆时针为true

注意，这里的角度是用弧度表示的，不是直接写角度，那问题来了，一般我们知道一个圆弧是多少度，怎么知道它是多少弧度呢？总感觉弧度太抽象，嗯嗯，我也有同感，那我们就来科普一下弧度的算法吧，列几个公式（初中，高中的数学，都还给老师了）：

1弧度=r;
360°=2∏;
周长C=2∏r;
那么一周的弧度数=2∏r/r=2∏=360°
则1°=2∏*1°/360°=∏*1°/180°（弧度）
90°=∏*90°/180°（弧度）

圆的初始位置是在最右边，跟我们自己手绘圆的起点有那么一点点的不一样，默认是顺时针方向，那角度就应该是如图所示的角度，要是还不清楚的话，我们画2半圆，分别表示顺时针和逆时针，这样就应该清楚了，哦，需要说明的一点就是，画用的方法跟画直线和矩形框的原理是一样的，只是画出了路径，并没有添墨水，仍需用黑白双煞：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(80,100,50,0,180*Math.PI/180,false);
ctx.stroke();

ctx.beginPath();
ctx.arc(200,100,50,0,180*Math.PI/180,true);
ctx.stroke();

js里面是没有∏的，你懂的，但是有函数Math.PI，咦，这里为什么是圆弧而不是半圆啊，如果我要画一个半圆怎么弄呢？哈哈~，还记得上面三角形的那个折线吗？这个是一个原理，只是图形没有闭合而已，用closePath()就可以闭合了。

画一个扇形看看，这里我就闭合图形哈：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(80,100,50,30*Math.PI/180,150*Math.PI/180,false);
ctx.closePath();
ctx.stroke();

当当当当~~~噗，喷了一口老血，怎么是一条小船，说好的扇子呢？再看看三角图形，瞬间就明白了，图形闭合不是以圆心为起始点的，而是初始弧度为起点，然后闭合的时候是回到初始点，就变成小船了，那怎么才能画出一个扇形呢？给个思路，这里暂时不给代码，以后有时间当小实例给到大家，如果我以圆心为起点，画2条直线，连到圆弧的起始点和结束点，是不是就是一个扇形了，哈哈~，不多说了，脑补一下吧，当然，圆弧的起始点的坐标和结束点的坐标计算还是有点费劲的

前面我们画的是空心的圆或弧，可否画实心的呢？貌似问的有点多余，上面说了用黑白双煞，好吧，直接给个一饼好了：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.arc(150,150,50,0,360*Math.PI/180,false);
ctx.fill();

咦，怎么这么像某岛国国旗，还好我用的是默认黑色，嘘嘘，都没看到哈~
还有一个方法可以画圆弧：
arcTo(x1,y1,x2,y2,r)创建两个切线之间的弧/曲线
参数：x1,y1表示第一个坐标，x2,y2表示第二个坐标，r表示曲线半径
两个切线之间的曲线，试试：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.arcTo(150,20,150,70,50);
ctx.lineTo(150,120);
ctx.stroke();

果然是要在两条线段之间写曲线，要是先写2条曲线，在写arcTo()，貌似就出不来了，这让我们想到了moveTo(),lineTo()，再写一个例子：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.moveTo(150,20);
ctx.arcTo(150,200,50,0,20);
ctx.stroke();

想试一下，要是只有一条切线，会怎样？

好大的一个鱼钩啊，看来这样也是可以的，要是没有切线，可否？

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.arcTo(150,200,50,0,20);
ctx.stroke();

额，狗带了，没反应，看来必须至少有一个切线才能画弧线，有个点都行，要求不算高，满足你。

感觉这里始终没有将清楚，arcTo()为什么会画出这样的曲线呢，我觉得有必要画一张图来表示：

它的绘图原理应该是这样的，起始点是圆弧的第一个切点，也是画笔的起始点，然后arcTo的两个坐标点分别是圆弧的起点和终点，这样3个点就形成了2天相交的线，然后以半径为r画一个圆，与这2条线相切，2个切点就是绘制的这条弧，而第二张图就是arcTo()所绘制的图形，为了证实这一点，我们写一个相近的图形来看看：

varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");
ctx.beginPath();
ctx.fillRect(100,100,5,5);
ctx.fillRect(180,80,5,5);
ctx.fillRect(160,180,5,5);
ctx.moveTo(62,112);
ctx.lineTo(182,82);
ctx.lineTo(162,182);
//这里是绘制切线弧
ctx.moveTo(103,103);
ctx.arcTo(183,83,162,182,40);
ctx.stroke();

对比这2组图，将生成的弧线用圆对比一下，会发现起点并不是切点，但基本思路是正确的，3点形成一个夹角，然后以r为圆心，画一个圆，从起点到第二个切点，就是arcTo()方法所绘制的图形。

今天就到这吧！讲的很混乱，东一脚西一脚的，希望你们能懂！最希望的是能对你们有帮助，那就再好不过了！

 以上就是canvas API ，通俗的canvas基础知识（二） 的内容，更多相关内容请关注PHP中文网（www.php.cn）！

相关文章：

canvas API 介绍，常见的canvas基础知识（一）

Einführung in die Canvas-API, allgemeine Canvas-Grundkenntnisse (3)

Einführung in die Canvas-API, allgemeine Canvas-Grundkenntnisse (4)