Commentaire: Cet article présente principalement des exemples de code de graphe de graphage HTML5. Les amis qui en ont besoin peuvent y faire référence.
Image de reproduction:
Astuce: copiez le code dans un fichier HTML et enregistrez-le, et ouvrez-le directement pour voir l'effet.
Code d'implémentation:
<html lang = "zh">
<adal>
<meta charset = "gbk">
<Title> Graphique en dents de scie </TITME>
<script type = "text / javascript">
Window.AddeventListener ("Load", EventWindowLoDed, false);
fonction eventWindowLoDed () {
var x, y;
var thecanvas = document.getElementById ("canvas");
var context = thecanvas.getContext ("2d");
//Boîte
context.strokestyle = '# 00f';
context.linewidth = 10;
context.strokect (0, 0, thecanvas.width-0, thecanvas.height-0);
context.fillStyle = "# 00F";
pour (x = 5; x <= canvas.width; x = x + 10) {
context.beginPath ();
context.arc (x, 5,5,0, math.pi, false);
context.closepath ();
context.fill ();
context.beginPath ();
context.arc (x, canvas.height-5,5,0, math.pi, true);
context.closepath ();
context.fill ();
}
pour (y = 5; y <= canvas.height; y = y + 10) {
context.beginPath ();
context.arc (5, y, 5,0, math.pi * 2, true);
context.arc (canvas.width-5, y, 5,0, math.pi * 2, true);
context.closepath ();
context.fill ();
}
}
</cript>
</ head>
<body>
<div>
<lebvas>
</div>
</docy>
</html>