図形を描くプロジェクト(HTML版)

1.プログラム
2.プログラミングする中で難しかった点
3.リンク

1.プログラム

本体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正n角形を絵画</title>
</head>
<body>
    <canvas>canvas要素を使用しています。使用可能なブラウザでやってみてください ^_^</canvas><br>
    正<input type="number" value="3" id="str1">角形
    <script>        
        document.addEventListener('keydown',(event) =>{
            var keyname = event.key
            if (keyname == "ArrowUp"){
                document.getElementById("str1").value = Number(document.getElementById("str1").value) + 1
            }else if (keyname == "ArrowDown"){
                document.getElementById("str1").value = document.getElementById("str1").value - 1

            }
        })
        function kaiga(a){
            var canvas = document.querySelector('canvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0,0,800,800)
            ctx.fillStyle = "red";
            ctx.lineWidth = 10;
            ctx.beginPath();
            var b = 0
            ctx.moveTo(100,50)
            for (var i = 0;i <= a;++i){
                ctx.lineTo((Math.sin(Math.PI / 180 * (360 / a * i)) * 50)+50,(Math.cos(Math.PI / 180 * (360 / a * i)) * 50)+50)
            }
            ctx.fill()
        }
        function kaiga2(){
            if (document.getElementById("str1").value < 3){
                document.getElementById("str1").value = 3
            }
            if (document.getElementById("str1").value > 5000){
                document.getElementById("str1").value = 5000
            }
            kaiga(document.getElementById("str1").value)
        }
        setInterval(kaiga2,0)
    </script>
</body>
</html>

オープニング

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正n角形を絵画</title>
</head>
<body>
    <div id="str1" style="margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;">powerd by kangping</div>
    <script>
        var a = 20
        function ka(){
            if (a == 100){
                location.href = "./index.html"
            }
            document.getElementById("str1").style.fontSize = a + "pt"
            ++a
        }
        setInterval(ka,10)
    </script>
</body>
</html>