[ ECMAScript ] javascript - 원의 n분점을 연결하는 직선 그리기 > javascript&jQuery

본문 바로가기
사이트 내 전체검색

javascript&jQuery

[ ECMAScript ] javascript - 원의 n분점을 연결하는 직선 그리기

작성자 웹지기
작성일 21-01-14 23:47 | 조회 4,362 | 댓글 0

본문

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>원의 n분점을 연결하는 직선 그리기</title>

<script>

function diamond(c,n,x,y,r,color) {

    c.strokeStyle = color;

    c.beginPath();

    for(var i=0; i<n; i++){

        var t=i*2*Math.PI/n;

        for(var j=i+1; j<n; j++) {

            var s=j*2*Math.PI/n;

            c.moveTo(x+r*Math.cos(t), y+r*Math.sin(t));

            c.lineTo(x+r*Math.cos(s), y+r*Math.sin(s));

        }

    }

    c.stroke();

}

 

window.onload = function(){

    var canvas = document.getElementById("mycanvas");

    var ctx = canvas.getContext("2d");

    diamond(ctx, 6, 170 , 170 , 150,'darkblue');

    diamond(ctx, 12, 490 , 170 , 150,'darkblue');

    diamond(ctx,18, 810 , 170 , 150,'darkblue');

};

</script>

</head>

<body>

 <canvas id="mycanvas" width="1000" height="400"></canvas>

</body>

</html>

 

0 0

댓글목록 0

등록된 댓글이 없습니다.

javascript&jQuery 목록

Total 63
게시물 검색

회원로그인

접속자집계

오늘
1,541
어제
31,923
최대
61,067
전체
18,311,465

그누보드5
Copyright © www.funyphp.com. All rights reserved.