Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-01-22 10:51:19

original

1425 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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