Using HTML5 draw canvas containing a star.

4views
written 8.0 years ago by
teamques10 ★ 70k
<!DOCTYPE html>
<html lang="en">

<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>canvas</title>
</head>

<body>

<di class="can">
    <h1 onclick="drawstar()">canvas click to draw star</h1>
    <canvas id="canvas" width=300 height=300></canvas>
</di>
</body>
<script>

function drawstar() {

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

    function drawStar(cx, cy, spikes, outerRadius, innerRadius) {
        var rot = Math.PI / 2 * 3;
        var x = cx;
        var y = cy;
        var step = Math.PI / spikes;

        ctx.beginPath();
        ctx.moveTo(cx, cy - outerRadius)
        for (i = 0; i < spikes; i++) {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            ctx.lineTo(x, y)
            rot += step

            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            ctx.lineTo(x, y)
            rot += step
        }
        ctx.lineTo(cx, cy - outerRadius);
        ctx.closePath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'blue';
        ctx.stroke();
        ctx.fillStyle = 'skyblue';
        ctx.fill();
    }

    drawStar(100, 100, 5, 30, 15);

}

 </script>

 </html>
ADD COMMENT EDIT