Комментарий: В этой статье в основном представлены примеры HTML5 Canvas Jagged Code. Друзья, которые это нужно, могут ссылаться на это.
Изображение воспроизведения:
Совет: скопируйте код в HTML -файл и сохраните его и откройте его непосредственно, чтобы увидеть эффект.
Код реализации:
<html lang = "zh">
<голова>
<meta charset = "gbk">
<Title> Sawtoothed Graph </title>
<script type = "text/javascript">
window.addeventListener ("Load", EventWindowload, false);
function eventWindowloaded () {
var x, y;
var thecanvas = document.getElementbyId ("canvas");
var context = thecanvas.getContext ("2d");
//Коробка
context.strokestyle = '#00f';
Context.linewidth = 10;
Context.strokerect (0, 0, Thecanvas.width-0, Thecanvas.height-0);
context.fillstyle = "#00f";
for (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 ();
}
for (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>
<тело>
<div>
<Canvas>
</div>
</body>
</html>