tsuzukihashi/diamond.html

## diamond.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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,24,170,170,150,'darkblue');
            diamond(ctx,30,490,170,150,'pink');
            diamond(ctx,18,810,170,150,'red');
        };
    </script>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="400"></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<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 = i2Math.PI/n;
	for(var j=i+1;j<n;j++){
	var s = j2Math.PI/n;
	c.moveTo(x+rMath.cos(t), y+rMath.sin(t));
	c.lineTo(x+rMath.cos(s), y+rMath.sin(s));
	}

	}
	c.stroke();
	}

	window.onload = function(){
	var canvas = document.getElementById("mycanvas");
	var ctx = canvas.getContext("2d");
	diamond(ctx,24,170,170,150,'darkblue');
	diamond(ctx,30,490,170,150,'pink');
	diamond(ctx,18,810,170,150,'red');
	};
	</script>
	</head>
	<body>
	<canvas id="mycanvas" width="1000" height="400"></canvas>
	</body>
	</html>