简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  HTML5-Canvas-Zeichnung – Verwenden Sie Canvas zum Zeichnen von Grafiken und Text-Tutorials. Verwenden Sie HTML5-Canvas, um wunderschöne Bilder zu zeichnen. HTML5-Tutorial-Fähigkeiten

HTML5-Canvas-Zeichnung – Verwenden Sie Canvas zum Zeichnen von Grafiken und Text-Tutorials. Verwenden Sie HTML5-Canvas, um wunderschöne Bilder zu zeichnen. HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:46:301700Durchsuche

HTML5 ist sehr beliebt. Vor Kurzem kam mir die Idee, HTML-bezogene Funktionen zu verwenden, daher sollte ich es sorgfältig lernen.

Nachdem ich mir die Funktionen von Canvas genau angesehen habe, habe ich das Gefühl, dass HTML5 in der clientseitigen Interaktion immer funktionaler wird. Heute habe ich einen Blick auf die Canvas-Zeichnung geworfen verwenden.

1. Zeichnen Sie mit Canvas eine gerade Linie:



XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(20,30);//第一个起点   
  17.             cans.lineTo(120,90);//第二个点   
  18.             cans.lineTo(220,60);//第三个点（以第二个点为起点）   
  19.             cans.lineWidth=3;   
  20.             cans.StrokeStyle = 'red';   
  21.             cans.Stroke();   
  22.         }
  23.  Skript> 
  24.  <body onload="pageLoad( );">
  25.  <Leinwand id="can" Breite="400px" Höhe="300px">4Leinwand>
  26.  Körper> 
  27. html>

Die beiden hier verwendeten API-Methoden moveTo und lineTo sind die Startpunkt- bzw. Endpunktkoordinaten des Liniensegments. Die Variablen sind (X-Koordinate, Y-Koordinate), StrokeStyle und Stroke bzw. Pfadzeichnungsstil und Zeichnungspfad.

2. Zeichnen Sie Verlaufslinien

Verlaufslinien haben einen Farbverlaufseffekt. Natürlich kann der Verlaufsstil der Richtung des Pfades folgen oder nicht:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(0,0);   
  17.             cans.lineTo(400,300);   
  18.             var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标   
  19.             gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置, 最大为1, 一个渐变中可以写任意个渐变颜色   
  20.             gnt1.addColorStop(1,'gelb');   
  21.             cans.lineWidth=3;   
  22.             cans.StrokeStyle = gnt1;   
  23.             cans.Stroke();   
  24.         }
  25.  Skript> 
  26.  <body onload="pageLoad( );">
  27.  <Leinwand id="can" Breite="400px" Höhe="300px">4Leinwand>
  28.  Körper> 
  29. html>

3. Zeichnen Sie ein Rechteck oder Quadrat:

Wenn Sie HTML4 verwenden, kann diese Art von rechteckigem Rahmen nur mit dem Hintergrundcode generiert werden. Jetzt kann die von HTML5 bereitgestellte Canvas-Funktion einfach gezeichnet werden, sodass die Vorteile von HTML5 recht groß sind.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.fillStyle = 'gelb';   
  17.             cans.fillRect(30,30,340,240);   
  18.         }   
  19.     Skript>  
  20.     <body onload="pageLoad( );">  
  21.         <Leinwand id="can"  Breite="400px" Höhe="300px">4Leinwand>   
  22.     Körper>  
  23. html>  

Hier wird eine Methode verwendet - fillRect(). Anhand der wörtlichen Bedeutung können Sie erkennen, dass es sich hierbei um das Füllen eines Rechtecks ​​handelt. Die Parameter hier sind eine Erklärung wert das Gleiche wie die Koordinaten in der Mathematik. Weitere Informationen finden Sie unter

X und Y beginnen hier am Startpunkt relativ zur oberen linken Ecke der Leinwand, denken Sie daran! !

4. Zeichnen Sie ein einfaches rechteckiges Feld

Im obigen Beispiel geht es darum, einen rechteckigen Block zu zeichnen und ihn mit Farbe zu füllen. In diesem Beispiel wird einfach ein Rechteck gezeichnet, ohne den Fülleffekt zu bemerken.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.StrokeStyle = 'red';   
  17.             cans.strokeRect(30,30,340,240);   
  18.         }   
  19.     Skript>  
  20.     <body onload="pageLoad( );">  
  21.         <Leinwand id="can"  Breite="400px" Höhe="300px">4Leinwand>   
  22.     Körper>  
  23. html>  
  24.   

Dies ist sehr einfach, genau wie im obigen Beispiel. Ersetzen Sie einfach die Füllung durch einen Strich. Weitere Informationen finden Sie im obigen Beispiel.

5. Zeichnen Sie ein Rechteck mit linearem Farbverlauf

Verlauf ist ein ziemlich guter Fülleffekt. Durch die Kombination von Beispiel 2 und Beispiel 3 können wir ein Verlaufsrechteck erstellen

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             var gnt1 = cans.createLinearGradient(10,0,390,0);   
  17.             gnt1.addColorStop(0,'red');   
  18.             gnt1.addColorStop(0.5,'green');   
  19.             gnt1.addColorStop(1,'blue');   
  20.             cans.fillStyle = gnt1;   
  21.             cans.fillRect(10,10,380,280);   
  22.         }
  23.  Skript> 
  24.  <body onload="pageLoad( );">
  25.  <Leinwand id="can" Breite="400px" Höhe="300px">4Leinwand>
  26.  Körper> 
  27. html>

Keine Erklärung, denken Sie einfach an fillRect(X,Y,Width,Height).

6. Füllen Sie einen Kreis


Kreisformen werden häufig verwendet, darunter auch Ovale.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,true);   
  18.             cans.closePath();   
  19.             cans.fillStyle = 'green';//本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~   
  20.             cans.fill();   
  21.         }
  22.  Skript> 
  23.  <body onload="pageLoad( );">
  24.  <Leinwand id="can" Breite="400px" Höhe="300px">4Leinwand>
  25.  Körper> 
  26. html>

Die Verwendung der Bogenmethode hier ist arc(X,Y,Radius,startAngle,endAngle,gegen den Uhrzeigersinn), was bedeutet (X-Koordinate des Kreismittelpunkts, Y-Koordinate des Kreismittelpunkts, Radius, Startwinkel (Bogenmaß), Endwinkel Bogenmaß, ob nach Zeichnung im Uhrzeigersinn);

Vergleich der Parameter im Bogen:

a.cans.arc(200,150,100,0,Math.PI,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

d, cans.arc(200,150,100,0,Math.PI/2,false);

7. Rundblock

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,false);   
  18.             cans.closePath();   
  19.             cans.lineWidth = 5;   
  20.             cans.StrokeStyle = 'red';   
  21.             cans.Stroke();   
  22.         }
  23.  Skript> 
  24.  <body onload="pageLoad( );">
  25.  <Leinwand id="can" Breite="400px" Höhe="300px">4Leinwand>
  26.  Körper> 
  27. html>

Ich werde es hier nicht erklären. Wie im obigen Beispiel steuert lineWidth die Breite der Linie.

8. Kreisförmiger Farbverlauf

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.     <Kopf>  
  4.         <meta charset="UTF- 8">  
  5.     Kopf>  
  6.     <Stil Typ="text/ css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     Stil>  
  9.     <Skript Typ="text/ Javascript">  
  10.         Funktion $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             var gnt = cans.createRadialGradient(200,300,50,200,200,200);   
  17.             gnt.addColorStop(1,'red');   
  18.             gnt.addColorStop(0,'green');   
  19.             cans.fillStyle = gnt;   
  20.             cans.fillRect(0,0,800,600);   
  21.         }
  22.  Skript> 
  23.  <body onload="pageLoad( );">
  24.  <Leinwand id="can" Breite="800px" Höhe="600px">4Leinwand>
  25.  Körper> 
  26. html>

Was hier erklärt werden muss, ist die Methode createRadialGradient. Die Parameter sind (Xstart, Ystart, radiusStart, XEnd, YEnd, radiusEnd). Originalkreis und der andere Es ist ein Verlaufskreis. Tatsächlich können mit dieser Methode der Koordinaten- und Radiussteuerung viele Stile erreicht werden, z. B.

Dreidimensionaler Kreis

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. var gnt = cans.createRadialGradient(200,150,0,200,50,250);
  2. gnt.addColorStop(0,'red');
  3. gnt.addColorStop(1,'#333');
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementieren Sie die WeChat-Shake-Funktion basierend auf den Tutorialfähigkeiten von html5 DeviceOrientation_html5Nächster Artikel：Implementieren Sie die WeChat-Shake-Funktion basierend auf den Tutorialfähigkeiten von html5 DeviceOrientation_html5

In Verbindung stehende Artikel

Mehr sehen