<canvas></canvas> est une nouvelle balise qui apparaît en HTML5, elle possède ses propres propriétés, méthodes et événements, parmi lesquels la méthode de dessin, qui peut être appelée par js pour. dessin. .
Qu'est-ce que Canvas ?
L'élément HTML5 <canvas> est utilisé pour dessiner des graphiques, ce qui est effectué via des scripts (généralement JavaScript). juste un conteneur graphique, 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.
Fondamentalement, tous les navigateurs prennent en charge l'élément <canvas>, à l'exception d'IE8 et des versions précédentes.
Il existe deux méthodes pour dessiner des images avec l'élément canvas.
context.fill()//Fill
context.Stroke()//Dessinez la bordure
style : Avant de dessiner des graphiques, définissez le style de dessin
context.fillStyle//Fill style
StrokeStyle//Border style<. 🎜>
context.lineWidth//Largeur de bordure graphique
Représentation des couleurs :
Utiliser le nom de la couleur directement : "rouge" "vert" "bleu"
Valeur de couleur hexadécimale : "#EEEEFF"
rgb(1-255, 1-255,1-255)
rgba(1-255,1-255,1-255, transparence)
Utiliser Canvas Tracer une ligne droite :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30);//第一个起点
cans.lineTo(120,90);//第二个点
cans.lineTo(220,60);//第三个点（以第二个点为起点）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Coordonnées du canevasle canevas est une grille bidimensionnelle.
La coordonnée du coin supérieur gauche de la toile est (0,0)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'yellow';
cans.fillRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Remarque : Une méthode est utilisée ici - fillRect() Du sens littéral, vous pouvez également savoir qu'il s'agit de remplir un rectangle. Les paramètres ici valent la peine d'être expliqués fillRect(X,Y). ,Width,Height), ceci est différent des coordonnées en mathématiques. Le X et le Y ici partent du point de départ par rapport au coin supérieur gauche du canevas. !
Rond
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Remarque : L'utilisation de la méthode arc ici est arc(X,Y,Radius,startAngle,endAngle,antihoraire), ce qui signifie (coordonnée X du centre du cercle, coordonnée Y du centre du cercle, rayon, angle de départ (radians), angle de fin radian , que ce soit selon Draw dans le sens des aiguilles d'une montre);
Toile - Dégradé
Le dégradé peut remplir des rectangles, des cercles , Lignes, texte, etc., diverses formes peuvent avoir différentes couleurs définies par elles-mêmes.
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 couleurs d'arrêt ou plus.
La méthode addColorStop() spécifie l'arrêt de couleur. Les paramètres sont décrits par des coordonnées, qui peuvent être de 0 à 1.
Utilisez le dégradé, définissez la valeur de fillStyle ou StrokeStyle sur le dégradé, puis dessinez une forme, telle qu'un rectangle, du texte ou une ligne.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt1 = cans.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Toile - texte
texte : le texte à dessiner
x : l'axe d'abscisse du point de départ du texte
y : l'axe de coordonnées y du point de départ du texte
context.font : Définir le style de police
context.textAlign : alignement horizontal
début, fin, droite, centre
context.textBaseline : alignement vertical
haut, suspendu, milieu, alphabétique, idéographique、 en bas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.font = 'bold 144px consolas';
cans.textAlign = 'left';
cans.textBaseline = 'top';
cans.strokeStyle = '#DF5326';
cans.strokeText('Hello', 100, 100);
cans.font = 'bold 144px arial';
cans.fillStyle = 'red';
cans.fillText('World', 300,300);
}
function img_click(){
var can = $$('can');
var cans = can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>
section suivante