Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Eine Sammlung grundlegender HTML5-Canvas-Zeichnungsbeispielcodes_html5-Tutorialfähigkeiten

Eine Sammlung grundlegender HTML5-Canvas-Zeichnungsbeispielcodes_html5-Tutorialfähigkeiten

WBOY
Freigeben： 2016-05-16 15:45:46
Original
1642 Leute haben es durchsucht

Grundlegendes Zeichnen

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. var canvas = document.getElementById('canvas'); >
    2. if (canvas.getContext) {
    3. var
  3. context = canvas.getContext('2d'); // Linienbreite
    5. context.lineWidth
  5. = 4; // Pinselfarbe
    7. context.StrokeStyle
  7. = 'red'; // Füllfarbe
    9. context.fillStyle
  9. = "red"; // Linienkappentyp
  10.  
    11. context.lineCap
  11. = 'butt'; // rund, eckig  // Startpfad
  12. context.beginPath();
  13. // Ausgangspunkt
  14. context.moveTo(10,10);
  15. // Endpunkt
  16. context.lineTo(150,50);
  17. // Zeichnen
  18. context.Stroke();
  19. ｝
    21.  
Rechteck



XML/HTML-Code

Inhalt in die Zwischenablage kopieren
var
  1. canvas = document.getElementById('canvas'); > if (canvas.getContext) {
    2. context.beginPath();
    3. context.strokeRect(10,10,70,40);
    4. // Eine andere Art von Rechteck
    5. context.rect(10,10.70,40);
    6. context.Stroke();
    7.  
    8. // ausgefülltes Rechteck
    9. context.beginPath();
    10. context.fillRect(10,10,70,40);
    11. // Eine andere Möglichkeit, ein durchgezogenes Rechteck zu sein
    12. context.beginPath();
    13. context.rect(10,10,70,40);
    14. context.fill();
    15. ｝
  16.  
    17. Rund


XML/HTML-CodeInhalt in die Zwischenablage kopieren

  1. var canvas = document.getElementById('canvas'); >
    2. if (canvas.getContext) {
    3. context.beginPath();
    4. // Kreismittelpunktskoordinate x, Kreismittelpunktkoordinate Y, Bogenradius, Startwinkel, Endwinkel, ob gegen den Uhrzeigersinn
    5. // Der vierte und fünfte Parameter sind die einzugebenden Bogenmaße. Wenn Sie einen Winkel von 30 zeichnen, müssen Sie ihn in Bogenmaß 30 * Math.PI / 180
  5. umrechnen
    6. context.arc(100,100,70,0,130 * Math.PI / 180, true);
    7. context.Stroke();
    8. context.fill();
    9. ｝
 

Abgerundete Ecken

XML/HTML-Code
Inhalt in die Zwischenablage kopieren
  1. var canvas = document.getElementById('canvas'); > if (canvas.getContext) {
  2. context.beginPath();
  3. context.moveTo(20,20);
  4. context.lineTo(70,20);
  5. // Bogen zeichnen p1.x p1.y p2.x, p2.y Bogenradius für einen Pfad,
  6. context.arcTo(120,30,120,70, 50);
    7. context.lineTo(120,120);
    8. context.Stroke();
    9.  
    10. // Leinwand-Zeichenfläche löschen
    11. context.beginPath();
    12. context.fillRect(10,10,200,100);
    13.  
    14. // Bereich löschen
    15. context.clearRect(30,30,50,50);
    16. ｝
  17. Quadratische Bézier-Kurve

XML/HTML-CodeInhalt in die Zwischenablage kopieren

var
canvas
  1. = document.getElementById('canvas'); > if (canvas.getContext) { context.beginPath();
  2. context.moveTo(100,100);
  3. context.quadraticCurveTo(20,50,200,20);
    4. context.Stroke();
    5. ｝
    7. Kubische Bézier-Kurve
XML/HTML-Code

Inhalt in die Zwischenablage kopieren

  1. var canvas = document.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.      context.moveTo(68,130);   
  4.      var cX1 = 20;   
  5.      var cY1 = 10;   
  6.      var cX2 = 268;   
  7.      var cY2 = 10;   
  8.      var endX = 268;   
  9.      var endY = 170;   
  10.      context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
  11.      context.Stroke();   
  12.         
  13.     // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总>
  14.     // 绘制圆形   
  15.     context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
  16.     // 限制区域   
  17.     context.clip();   
  18.     // 开始尝试绘制其他   
  19.     context.beginPath();   
  20.     context.fillStyle = 'lightblue';   
  21.     // 结果矩形并没有显示出来   
  22.     context.fillRect(0,0,300,150);   
  23. }  

画板进阶使用

XML/HTML-Code复制内容到剪贴板
  1. var canvas = document.getElementById('canvas'); >
    2. if (canvas.getContext) {
    3. var
  3. context = canvas.getContext('2d'); /*
  4. * drawImage(image,dx,dy)
  5. * drawImage(image,dx,dy,dw,dh)
  6. * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
    7. * Bildzeichnungsobjekt
    8. * Koordinaten der DX-Dy-Leinwand
    9. * dw, dh gibt die Position des Bildes auf der Leinwand an, das gezeichnet werden soll
    10. * sw, sh stellt den zu zeichnenden Bildbereich dar
    11. * sx,sy Die Startposition der zu zeichnenden Zeichnung
    12. */
    13. var
  13. image
    14. =
  14. document.getElementById('img'); context.drawImage(image, 0, 0); var
    15. img
  15. =
    16. new
  16. Image();  img.src =
    17. 'images/1.jpg'
  17. ;  img.onload =
    18. Funktion
  18. (){                                             // drawImage
    19. // Beginnen Sie mit dem Zeichnen bei 0,0-Koordinaten
    20. // context.drawImage(img,0,0);
    21. // Beginnend bei 0, 0, zeichnen Sie das gesamte Bild auf 100.100 Länge und Breite
    22. // context.drawImage(img, 0, 0, 100, 100);
    23. // Screenshot, 50,50 bis 100.100. Beginnen Sie mit dem Zeichnen bei 260.130 und platzieren Sie es im 100.100-Längen- und Breitenbereich
  23. // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
  24.                                            
    25. // Verwenden Sie getImageData und putImageData, um Bilder zu zeichnen
    27. context.drawImage(img, 10, 10);
    28. // Pixeldaten von der Zeichenfläche abrufen
    29. // Startposition, Endposition
    30. var
  30. imgData
    31. =
  31. context
    32. .getImageData(50,50,100,100);
  33. // Zeichnen Sie die Daten zu den angegebenen Positionskoordinaten auf dem Zeichenbrett
  34. context.putImageData(imgData,10,260);
    35. // Einen Teil der Pixeldaten auf das Zeichenbrett zeichnen
    36. context.putImageData(imgData,200,260,50,50,100,100);
  36.                                            
    37. // createImageData Pixel erstellen
    38. var
  38. imgData
    39. =
  39. context.getImageData(50,50,200,200); // Erstellt ein leeres Objekt der angegebenen Größe
    40. var
  40. imgData01
    41. =
  41. context.createImageData(imgData);                                                  für (
    42. i
  42. =
    43. 0
  43. ; i < imgData01.width * imgData01.height * 4; i =4) { // Rote Pixel imgData01.data[i 0] = 255;
    44. imgData01.data[i 1] = 0;
  44. imgData01.data[i 2] = 0;
    45. imgData01.data[i 3] = 255;
  45.                                             
    46.                                                                     
  46. context.putImageData(imgData01, 10, 260);
  47. }  
  48. }
Verwandte Etiketten：
canvas html5 绘图
Quelle：php.cn
Vorheriger Artikel：Sprechen Sie über die Fähigkeiten der lokalen HTML5-Speichertechnologie. HTML5-Tutorial Nächster Artikel：Eine kurze Diskussion über die Online-Videowiedergabelösung basierend auf HTML5_html5-Tutorialfähigkeiten
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage