Comentário: Este artigo apresenta principalmente exemplos de código gráfico de tela HTML5. Amigos que precisam podem se referir a ele.
Imagem de reprodução:
Dica: copie o código em um arquivo HTML e salve -o e abra diretamente para ver o efeito.
Código de implementação:
<html lang = "zh">
<head>
<meta charset = "gbk">
<título> Gráfico Sawtoothed </title>
<script type = "text/javascript">
window.addeventListener ("load", eventwindowloaded, false);
função eventwindowloaded () {
var x, y;
var theCanvas = document.getElementById ("Canvas");
var context = thecanvas.getContext ("2d");
//Caixa
context.strokestyle = '#00f';
context.LineWidth = 10;
context.stragerect (0, 0, thecanvas.width-0, tecanvas.Height-0);
context.fillstyle = "#00f";
para (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 ();
}
para (y = 5; y <= canvas.Height; y = y+10) {
context.BeginPath ();
context.arc (5, y, 5,0, math.pi*2, verdadeiro);
context.arc (Canvas.width-5, y, 5,0, Math.pi*2, verdadeiro);
context.ClosePath ();
context.fill ();
}
}
</script>
</head>
<Body>
<div>
<Canvas>
</div>
</body>
</html>