Maison >interface Web >Tutoriel H5 >Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

黄舟original: 2017-01-22 10:51:191484parcourir

Comme mentionné précédemment, Canvas est une fonctionnalité importante dans HTML5. La fonction Canvas est très puissante. Les effets qui peuvent être obtenus avec Photoshop peuvent également être obtenus avec Canvas. Ci-dessous, nous utilisons Canvas pour dessiner des graphiques de base.

1. Utilisation de la balise Canvas

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>  
    </body>  
</html>

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

Vous pouvez voir que Canvas est comme une toile, sur laquelle nous pouvons dessiner les graphiques dont nous avons besoin. . L'élément canevas lui-même n'a aucune capacité de dessin. Tous les travaux de dessin doivent être effectués en JavaScript.

2. Tracez un rectangle

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
    </body>  
    <script type="text/javascript">  
        var c=document.getElementById(&#39;1&#39;);  
        var p=c.getContext("2d");  
    <span style="white-space:pre">  </span>//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。  
        p.fillStyle="#FF0000";  
        p.fillRect(0, 0, 300, 300);  
        p.fillStyle="rgba(0,0,255,0.5)";  
        p.fillRect(200,200,500,500);  
    </script>  
</html>

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

3. Tracez une ligne

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
    <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
 <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.moveTo(10,10);  
    p.lineTo(150,50);  
    p.lineTo(10,50);  
    p.stroke();  
 </script>  
</html>

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

4. Dessinez un cercle

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.fillStyle="#FF0000";  
    p.beginPath();  
    p.arc(80,80,15,0,Math.PI*2,true);  
    p.closePath();  
    p.fill();  
 </script>  
</html>

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

5. Dégradé

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById("1");  
    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>  
</html>

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

6. Dessinez un photo

<!DOCTYPE HTML>  
<html>  
<body>  
  
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">  
Your browser does not support the canvas element.  
</canvas>  
  
<script type="text/javascript">  
  
var c=document.getElementById("myCanvas");  
var cxt=c.getContext("2d");  
var img=new Image()  
img.src="/i/eg_flower.png"  
cxt.drawImage(img,0,0);  
  
</script>  
  
</body>  
</html>

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

7. Polygon

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.fillStyle="#FF0000";  
    p.moveTo(10,10);  
    p.lineTo(150,50);  
    p.lineTo(10,50);  
    p.lineTo(20,30);  
    p.fill();  
 </script>  
</html>

Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile

Ce qui précède est le chemin de développement mobile HTML5 de Xiaoqiang (6 ) - —Contenu de base sur le dessin graphique Canvas Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

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

Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (5) – créer un magnifique lecteur vidéoArticle suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (5) – créer un magnifique lecteur vidéo

Articles Liés

Voir plus