Toile HTML5
Qu'est-ce que Canvas ?
L'élément HTML5 <canvas> est utilisé pour dessiner des graphiques, ce qui se fait via des scripts (généralement JavaScript).
Dessinez un rectangle rouge, un rectangle dégradé, un rectangle coloré et du texte coloré sur la toile. La balise
<canvas> est juste un conteneur pour les graphiques, vous devez utiliser un script pour dessiner les graphiques.
Vous pouvez utiliser Canva pour dessiner des chemins, des cases, des cercles, des personnages et ajouter des images de différentes manières.
Prise en charge du navigateur
Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge l'élément <canvas>.
Remarque : Internet Explorer 8 et versions antérieures La version IE du navigateur ne prend pas en charge l'élément <canvas>
Créer un canevas (Canvas)
Un canevas. sur la page Web Au centre se trouve une boîte rectangulaire, dessinée à travers l'élément <canvas>
Remarque : Par défaut, l'élément <canvas>
<canvas>Un exemple simple est le suivant :
<canvas id="myCanvas" width="200" height="100">< ;/canvas> ;
Remarque : Les balises doivent généralement spécifier un attribut id (souvent référencé dans les scripts), et les attributs width et height définissent la taille du toile.
Astuce : Vous pouvez utiliser plusieurs éléments <canvas> dans une page HTML
Utilisez l'attribut de style pour ajouter des bordures :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #28c9b6;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> </body> </html><. 🎜>Exécutez le programme et essayez-le
Utilisez JavaScript pour dessiner des images
L'élément canevas lui-même n'a aucune capacité de dessin. Tous les travaux de dessin doivent être effectués dans JavaScript :Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>Résultat de l'exécution du programme : 
Exemple d'analyse :
Tout d'abord, recherchez l'élément <canvas> :Ensuite, créez l'objet contextuel :var c=document.getElementById ("myCanvas");
var ctx=c.getContext( " 2d");
getContext("2d") est un objet HTML5 intégré avec une variété de chemins de dessin, de rectangles, de cercles, de caractères, et ajouts Méthode Image.
Les deux lignes de code suivantes dessinent un rectangle rouge :Définissez la propriété fillStyle sur une couleur, un dégradé ou un motif CSS. Le paramètre par défaut pour fillStyle est #000000 (noir). La méthode fillRect(x,y,width,height) définit la méthode de remplissage actuelle du rectangle.ctx.fillStyle="#FF0000";ctx.fillRect(0, 0,150,75);
Coordonnées de la toile
la toile est une grille bidimensionnelle. Les coordonnées du coin supérieur gauche du canevas sont (0,0)La méthode fillRect ci-dessus a des paramètres (0,0,150,75). Moyens : Dessinez un rectangle de 150x75 sur la toile, en partant du coin supérieur gauche (0,0). Exemple de coordonnéesComme indiqué ci-dessous, les coordonnées X et Y de la toile sont utilisées pour positionner la peinture sur la toile. Les coordonnées de positionnement sont affichées sur le cadre rectangulaire où se déplace la souris.
Canvas - Chemin
Pour tracer des lignes sur Canvas, nous utiliserons les deux méthodes suivantes :
moveTo(x ,y) Définir la ligneCoordonnée de début
lineTo(x,y) Définir la ligneCoordonnée de fin
Pour tracer des lignes, nous devons utiliser la méthode "ink", tout comme Stroke().
Instance
Définir la coordonnée de départ ( 0,0) et la coordonnée de fin (200,100). Utilisez ensuite la méthode Stroke() pour tracer la ligne :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d31029;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>Résultat de l'exécution du programme :
Pour dessiner un cercle dans la toile, nous utiliserons la méthode suivante :
arc(x,y,r ,start,stop)
En fait, nous utilisons la méthode "ink" pour dessiner un cercle, comme Stroke() ou Fill().
Exemple
Utiliser la méthode arc() pour dessiner un cercle :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #1d17ff;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>Résultat de l'exécution du programme :
Canvas - Texte
Utilisez Canvas pour dessiner du texte Les propriétés et méthodes importantes sont les suivantes :
police -. Définir la police
fillText(text,x,y) - Dessiner du texte solide sur la toile
StrokeText(text,x,y) - Dessiner texte creux sur toile
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,30);
ctx.strokeText("你好吗！",10,80);
</script>
</body>
</html>Résultat en cours d'exécution du programme :
Toile - Dégradé
Le dégradé peut remplir des rectangles, des cercles, des lignes, du texte, etc., diverses formes peuvent être personnalisées Définissez différentes couleurs.
Il existe deux manières différentes de définir le dégradé du canevas :
createLinearGradient(x,y,x1,y1) - Créer un dégradé de ligne
createRadialGradient(x,y,r,x1,y1,r1) - Créer un dégradé radial/circulaire
Lorsque nous utilisons des objets dégradés, nous devons utiliser deux ou deux couleurs d'arrêt au-dessus de.
addColorStop()La méthode spécifie l'arrêt de couleur. Les paramètres sont décrits par des coordonnées, qui peuvent être comprises entre 0 et 1.
Utilisez le dégradé, définissez la valeur de fillStyle. ou StrokeStyle au dégradé, puis dessinez une forme, telle qu'un rectangle, du texte ou une ligne.
Instance
Utilisez createLinearGradient() pour créer un dégradé linéaire. Remplissez le rectangle de dégradé :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,10);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 充满度
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>Résultat de l'exécution du programme :
Exemple
Utilisez createRadialGradient() pour créer un dégradé radial/circulaire. Remplissez le rectangle de dégradé :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>Résultat en cours d'exécution du programme :
Canvas - Image
Vous pouvez mettre une image sur la toile, afin de pouvoir effectuer certaines opérations sur l'image et ajouter certains éléments de votre choix, comme du texte.
Placez une image sur la toile Utilisez la méthode suivante :
drawImage(image,x,y)
Utiliser une image
Instance
Placer une image sur le toile :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>使用图像:</p>
<img id="scream" src="http://img.blog.163.com/photo/g8yDNFsGMeq-pzHY2_n3aQ==/356628795492853826.jpg" alt="The Scream" width="220" height="277"><p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>Résultat de l'exécution du programme :
HTML Manuel de référence Canvas
Pour les attributs complets de la balise, veuillez vous référer au manuel de référence Canvas.
Le HTML <canvas> 标签
| < span style="font-size: 16px;">描述<🎜><🎜> | ||||
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
