Kommentar: In diesem Artikel wird hauptsächlich HTML5 -Beispiele für den Canvas -Graph -Code vorgestellt. Freunde, die es brauchen, können sich darauf beziehen.
Reproduktionsbild:
Tipp: Kopieren Sie den Code in eine HTML -Datei und speichern Sie ihn und öffnen Sie ihn direkt, um den Effekt anzuzeigen.
Implementierungscode:
<html lang = "zh">
<kopf>
<meta charset = "gbk">
<title> Sawtoothed Graph </title>
<script type = "text/javaScript">
window.adDeVentListener ("laden", EventWindowloaded, False);
Funktion EventWindowloaded () {
var x, y;
var thecanvas = document.getElementById ("canvas");
var context = thecanvas.getContext ("2d");
//Kasten
context.strokestyle = '#00f';
context.linewidth = 10;
context.strokerect (0, 0, thecanvas.width-0, thecanvas.height-0);
context.fillStyle = "#00f";
für (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 ();
}
für (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 ();
}
}
</script>
</head>
<body>
<div>
<Canvas>
</div>
</body>
</html>