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

Grundlegendes Zeichnen

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. var canvas = document.getElementById('canvas'); >
if (canvas.getContext) {
var
3. context = canvas.getContext('2d'); // Linienbreite
context.lineWidth
5. = 4; // Pinselfarbe
context.StrokeStyle
7. = 'red'; // Füllfarbe
context.fillStyle
9. = "red"; // Linienkappentyp
10.  
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. ｝
 

Rechteck

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

var

1. canvas = document.getElementById('canvas'); > if (canvas.getContext) {
context.beginPath();
context.strokeRect(10,10,70,40);
// Eine andere Art von Rechteck
context.rect(10,10.70,40);
context.Stroke();
 
// ausgefülltes Rechteck
context.beginPath();
context.fillRect(10,10,70,40);
// Eine andere Möglichkeit, ein durchgezogenes Rechteck zu sein
context.beginPath();
context.rect(10,10,70,40);
context.fill();
｝
16.  
Rund

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. var canvas = document.getElementById('canvas'); >
if (canvas.getContext) {
context.beginPath();
// Kreismittelpunktskoordinate x, Kreismittelpunktkoordinate Y, Bogenradius, Startwinkel, Endwinkel, ob gegen den Uhrzeigersinn
// 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
context.arc(100,100,70,0,130 * Math.PI / 180, true);
context.Stroke();
context.fill();
｝

 

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);
context.lineTo(120,120);
context.Stroke();
 
// Leinwand-Zeichenfläche löschen
context.beginPath();
context.fillRect(10,10,200,100);
 
// Bereich löschen
context.clearRect(30,30,50,50);
｝
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);
context.Stroke();
｝
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'); >
if (canvas.getContext) {
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);
* Bildzeichnungsobjekt
* Koordinaten der DX-Dy-Leinwand
* dw, dh gibt die Position des Bildes auf der Leinwand an, das gezeichnet werden soll
* sw, sh stellt den zu zeichnenden Bildbereich dar
* sx,sy Die Startposition der zu zeichnenden Zeichnung
*/
var
13. image
=
14. document.getElementById('img'); context.drawImage(image, 0, 0); var
img
15. =
new
16. Image();  img.src =
'images/1.jpg'
17. ;  img.onload =
Funktion
18. (){                                             // drawImage
// Beginnen Sie mit dem Zeichnen bei 0,0-Koordinaten
// context.drawImage(img,0,0);
// Beginnend bei 0, 0, zeichnen Sie das gesamte Bild auf 100.100 Länge und Breite
// context.drawImage(img, 0, 0, 100, 100);
// 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.                                            
// Verwenden Sie getImageData und putImageData, um Bilder zu zeichnen
context.drawImage(img, 10, 10);
// Pixeldaten von der Zeichenfläche abrufen
// Startposition, Endposition
var
30. imgData
=
31. context
.getImageData(50,50,100,100);
33. // Zeichnen Sie die Daten zu den angegebenen Positionskoordinaten auf dem Zeichenbrett
34. context.putImageData(imgData,10,260);
// Einen Teil der Pixeldaten auf das Zeichenbrett zeichnen
context.putImageData(imgData,200,260,50,50,100,100);
36.                                            
// createImageData Pixel erstellen
var
38. imgData
=
39. context.getImageData(50,50,200,200); // Erstellt ein leeres Objekt der angegebenen Größe
var
40. imgData01
=
41. context.createImageData(imgData);                                                  für (
i
42. =
0
43. ; i imgData01.width * imgData01.height * 4; i =4) { // Rote Pixel imgData01.data[i 0] = 255;
imgData01.data[i 1] = 0;
44. imgData01.data[i 2] = 0;
imgData01.data[i 3] = 255;
45.                                             
                                                                    
46. context.putImageData(imgData01, 10, 260);
47. }  
48. }