Maison >interface Web >Tutoriel H5 >Explication détaillée du canevas HTML5 (1)

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

黄舟
黄舟original
2017-03-17 15:32:423161parcourir

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>

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%">

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);

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>

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>

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>

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>

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)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn