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

본문 바로가기

사이트 내 전체검색

javascript&jQuery

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

작성일 21-01-14 23:47

페이지 정보

작성자 웹지기 조회 1,277회 댓글 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

댓글목록

등록된 댓글이 없습니다.

전체 63건 2 페이지

이미지 목록

게시물 검색
Copyright © 즐거운 코딩 생활 ( funyphp ). All rights reserved.
PC 버전으로 보기