Maison > Article > interface Web > Route de développement mobile HTML5 de Xiaoqiang (6) - Bases du dessin graphique sur toile
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>
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('1'); 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>
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('1'); var p=c.getContext("2d"); p.moveTo(10,10); p.lineTo(150,50); p.lineTo(10,50); p.stroke(); </script> </html>
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('1'); 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>
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>
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>
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('1'); 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>
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) !