댓글 :이 기사는 주로 HTML5 캔버스 jagged 그래프 코드 예제를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
생식 이미지 :
팁 : 코드를 HTML 파일에 복사하여 저장 한 후 직접 열어 효과를 확인하십시오.
구현 코드 :
<html lang = "zh">
<헤드>
<meta charset = "gbk">
<title> 톱니 그래프 </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";
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 ();
}
}
</스크립트>
</head>
<body>
<div>
<canvas>
</div>
</body>
</html>