Comentario: Este artículo presenta principalmente ejemplos de código gráfico de lienzo HTML5. Los amigos que lo necesitan pueden referirse a él.
Imagen de reproducción:
Consejo: Copie el código en un archivo HTML y guárdelo, y ábralo directamente para ver el efecto.
Código de implementación:
<html lang = "zh">
<Evista>
<meta charset = "gbk">
<title> SawToothed Graph </title>
<script type = "text/javaScript">
Window.adDeventListener ("Load", EventWindowLoaded, falso);
función EventWindowLoaded () {
var x, y;
var thecanvas = document.getElementById ("Canvas");
context var = thecanvas.getContext ("2d");
//Caja
context.strokestyle = '#00f';
context.linewidth = 10;
context.strokerect (0, 0, thecanvas.width-0, thecanvas.height-0);
context.fillstyle = "#00f";
para (x = 5; x <= Canvas.Width; x = x+10) {
context.beginPath ();
context.arc (x, 5,5,0, math.pi, falso);
context.ClosePath ();
context.fill ();
context.beginPath ();
context.arc (x, canvas.height-5,5,0, math.pi, true);
context.ClosePath ();
context.fill ();
}
para (y = 5; y <= Canvas.Height; y = y+10) {
context.beginPath ();
context.arc (5, y, 5,0, math.pi*2, verdadero);
context.arc (Canvas.Width-5, y, 5,0, Math.pi*2, verdadero);
context.ClosePath ();
context.fill ();
}
}
</script>
</ablo>
<Body>
<div>
<Canvas>
</div>
</body>
</html>