Explication détaillée du canevas HTML5 (1)-Tutoriel H5-php.cn

Explication détaillée du canevas HTML5 (1)

黄舟

Libérer： 2017-03-17 15:32:42

original

3101 Les gens l'ont consulté

L'élément

canvas dans HTML5 est utilisé pour dessiner des graphiques sur des pages Web.

Caractéristiques de Canvas

La toile Canvas est une zone rectangulaire, chacun de ses pixels peut être contrôlé
Canvas utilise JavaScript pour contrôler le dessin
Canvas a des méthodes de lignes, de rectangles, de cercles et d'ajout d'images

Utilisation de la balise Canvas

Le suivant Le code consiste à utiliser l'écran de canevas pour dessiner un rectangle rouge de 200*200 :

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);
    </script>
    </body>
    </html>

Copier après la connexion

Enregistrez le code ci-dessus sous canvas.html et définissez son encodage sur utf-8 (sinon le code chinois tronqué ), utilisez le navigateur Lorsque vous l'ouvrez, vous pouvez voir l'effet suivant :
Explication détaillée du canevas HTML5 (1)

<canvas id="myCanvas" width="200"    style="max-width:90%">

Copier après la connexion

IciCréez une balise Canvas et définissez son identifiant comme myCanvas pour faciliter JavaScriptdessin Récupérer la balise objet .
Regardez à nouveau la partie dessin JavaScript :

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);

Copier après la connexion

La première phrase, getElementById, obtient l'objet canevas via l'ID de la balise Canvas.
La deuxième phrase, getContext, obtient l'objet contextuel.
La troisième phrase appelle la méthode fillStyle de l'objet Context, c'est-à-dire remplit sa couleur.
La quatrième phrase appelle la méthode fillRect de l'objet Context pour spécifier la zone remplie.

Autres instances de Canvas

Ligne droite

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();</script></body></html>

Copier après la connexion

Les résultats d'exécution sont les suivants :
Explication détaillée du canevas HTML5 (1)

Cercle

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();</script></body></html>

Copier après la connexion

Les résultats de course sont les suivants :
Explication détaillée du canevas HTML5 (1)

Dégradé

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");    
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);
    </script>
    </body>
    </html>

Copier après la connexion

L'effet est le suivant :
Explication détaillée du canevas HTML5 (1)

Image

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");    
    var img=new Image();
    img.src="1.png";
    img.onload=function(e){
        cxt.drawImage(img,0,0);
    }
    cxt.drawImage(img,0,0);
    </script>
    </body>
    </html>

Copier après la connexion

Notez que vous devez ajouter l'événement onload à Img, sinon l'image ne sera pas affichée.
Parmi eux, 1.png est le matériel photo que j'ai trouvé. Lorsque vous ouvrez la page, vous pouvez voir que l'image est affichée dans le canevas. Mon effet de course est le suivant, les photos peuvent être trouvées sur Baidu, il suffit de les regarder ~~
Explication détaillée du canevas HTML5 (1)