ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างรหัสกราฟ HTML5 Canvas Jagged เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
ภาพการทำซ้ำ:
เคล็ดลับ: คัดลอกรหัสลงในไฟล์ HTML และบันทึกและเปิดโดยตรงเพื่อดูเอฟเฟกต์
รหัสการใช้งาน:
<html lang = "zh">
<head>
<meta charset = "gbk">
<title> กราฟ Sawtoothed </title>
<script type = "text/javascript">
window.addeventListener ("โหลด", EventWindowLoaded, False);
ฟังก์ชัน 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";
สำหรับ (x = 5; x <= canvas.width; x = x+10) {
Context.BeginPath ();
Context.arc (x, 5,5,0, math.pi, false);
บริบท closepath ();
Context.fill ();
Context.BeginPath ();
context.arc (x, canvas.height-5,5,0, math.pi, true);
บริบท closepath ();
Context.fill ();
-
สำหรับ (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);
บริบท closepath ();
Context.fill ();
-
-
</script>
</head>
<body>
<div>
<Canvas>
</div>
</body>
</html>