Une collection d'exemples de dessin de base HTML5 Canvas codes_html5 compétences didactiques

Dessin de base

Code XML/HTMLCopier le contenu dans le presse-papiers

1. var canvas = document.getElementById('canvas'); >
if (canvas.getContext) {
var
3. context = canvas.getContext('2d'); // Largeur de trait
context.lineWidth
5. = 4 ; // Couleur du pinceau
context.StrokeStyle
7. = 'rouge'; // Couleur de remplissage
8. context.fillStyle
=
9. "rouge"; // Type de capuchon de ligne  
context.lineCap
10. =
'fesses'
11. ; // rond, carré  // Chemin de départ context.beginPath();
12. // Point de départ
13. context.moveTo(10,10);
14. // Point final
15. context.lineTo(150,50);
16. // Dessin
17. contexte.AVC();
18. ｝
 
20. Rectangle

Code XML/HTML
Copier le contenu dans le presse-papiers

var canvas

=

1. document.getElementById('canvas'); > if (canvas.getContext) { context.beginPath();
context.StrokeRect(10,10,70,40);
// Une autre façon de rectangle
context.rect(10,10.70,40);
contexte.AVC();
 
// rectangle plein
context.beginPath();
context.fillRect(10,10,70,40);
// Une autre façon de rectangle solide
context.beginPath();
context.rect(10,10,70,40);
context.fill();
｝
15.  
Rond

Code XML/HTML

Copier le contenu dans le presse-papiers

1. var canvas = document.getElementById('canvas'); >
if (canvas.getContext) {
context.beginPath();
// Coordonnée du centre du cercle x, coordonnée du centre du cercle Y, rayon de l'arc, angle de départ, angle de fin, que ce soit dans le sens inverse des aiguilles d'une montre
// Les quatrième et cinquième paramètres sont les radians à transmettre. Si vous dessinez un angle de 30, vous devez le convertir en radians 30 * Math.PI/180
context.arc(100,100,70,0,130 * Math.PI / 180, vrai
6. );
contexte.AVC();
context.fill();
｝

 

Coins arrondis

Code XML/HTML

Copier le contenu dans le presse-papiers

1. var canvas = document.getElementById('canvas'); > if (canvas.getContext) {
2. context.beginPath();
3. context.moveTo(20,20);
4. context.lineTo(70,20);
5. // Dessine l'arc p1.x p1.y p2.x, p2.y rayon d'arc pour un chemin,
6. context.arcTo(120,30,120,70, 50);
7. context.lineTo(120,120);
8. contexte.AVC();
9.  
10. // Effacer le plan de travail sur toile
11. context.beginPath();
12. context.fillRect(10,10,200,100);
13.  
14. // Effacer la zone
15. context.clearRect(30,30,50,50);
16. ｝

Courbe de Bézier quadratique

Code XML/HTML

Copier le contenu dans le presse-papiers

var

1. canvas = document.getElementById('canvas'); > if (canvas.getContext) {
context.beginPath();
contexte.moveTo(100,100);
context.quadraticCurveTo(20,50,200,20);
contexte.AVC();
｝
Courbe de Bézier cubique

Code XML/HTML

Copier le contenu dans le presse-papiers

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 = 'bleu clair';   
21.     // 结果矩形并没有显示出来   
22.     context.fillRect(0,0,300,150);   
23. }  

画板进阶使用

Code XML/HTML复制内容到剪贴板

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
);
7. *objet de dessin d'image
8. *Coordonnées de la toile dx dy
9. *dw, dh indique la position de l'image dans la toile à dessiner
10. *sw, sh représente la zone d'image à dessiner
11. *sx,sy La position de départ du dessin à dessiner
12. */
13. var
image
14. = document.getElementById('img'); context.drawImage(image, 0, 0);
var
15. img
=
16. nouveau Image();  img.src
=
17. 'images/1.jpg';  img.onload
=
18. fonction(){                                             // drawImage
19. // Commencez à dessiner à partir des coordonnées 0,0
20. // context.drawImage(img,0,0);
21. // À partir de 0, 0, dessinez l'image entière à 100 100 de longueur et de largeur
22. // context.drawImage(img, 0, 0, 100, 100);
23. // Capture d'écran, 50,50 à 100,100. Commencez à dessiner à partir de 260,130 et placez-le dans la zone 100,100 de longueur et de largeur
.
24. // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
25.                                            
// Utilisez getImageData et putImageData pour dessiner des images
context.drawImage(img, 10, 10);
// Récupère les données de pixels du plan de travail
// Position de départ, position de fin
var
31. imgData
=
32. context
.getImageData(50,50,100,100);
33. // Dessinez les données aux coordonnées de position spécifiées sur la planche à dessin
34. context.putImageData(imgData,10,260);
35. // Dessine une partie des données de pixels sur la planche à dessin
36. context.putImageData(imgData,200,260,50,50,100,100
);
37.                                            
// createImageData Créer des pixels
var
39. imgData = context.getImageData(50,50,200,200); // Crée un objet vide de taille spécifiée
40. var
imgData01
41. = context.createImageData(imgData);                                                   
pour (
42. i
=
43. 0; je imgData01.width * imgData01.height * 4; i =4) { // Pixels rouges
imgData01.data[i 0] = 255
imgData01.data[i 1] = 0
imgData01.data[i 2] = 0
imgData01.data[i 3] = 255
                                            
48.                                                                     
context.putImageData(imgData01, 10, 260);
}  
}