使用canvas绘制一个五角星

一、了解canvas

canvas 是HTML5新增的元素，用于在网页上绘制图形。但 canvas 只是图形的容器，必须要通过脚本(通常是JavaScript)来绘制图形。

可以通过多种方法使用canvas标签来绘制路径、盒、圆、字符及添加图像等。

<canvas> 与 </canvas>标签间插入的内容是供不支持 canvas 元素的浏览器显示的，可以用来做兼容，例如：

<canvas id="myCanvas" width="400" height="400">
    您的浏览器暂时不支持canvas，请升级或更换您的浏览器！
</canvas>

使用 canvas 来绘制图形：

<script>
    // 使用id来寻找canvas元素
    var myCanvas = document.getElementById('myCanvas');
    if (myCanvas.getContext) {
        // 创建context对象
        // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
        var ctx = myCanvas.getContext("2d");
        // 写一个Hello World先
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
    }
</script>

二、使用canvas绘制一个五角星

<script>
    // 使用id来寻找canvas元素
    var myCanvas = document.getElementById('myCanvas');
    if (myCanvas.getContext) {
        // 创建context对象
        // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
        var ctx = myCanvas.getContext("2d");
        // beginPath：开始绘制一段新的路径
        ctx.beginPath();
        var horn = 5; // 画5个角
        var angle = 360/horn; // 五个角的度数
        // 两个圆的半径
        var R = 200;
        var r = 80;
        // 坐标
        var x = 200;
        var y = 200;
        for (var i = 0; i < horn; i++) {
            // 角度转弧度：角度/180*Math.PI
            // 外圆顶点坐标
            ctx.lineTo(Math.cos((18 + i * angle) / 180 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180 * Math.PI) * R + y);
            // 內圆顶点坐标
            ctx.lineTo(Math.cos((54 + i * angle) / 180 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180 * Math.PI) * r + y);
        }
        // closePath：关闭路径，将路径的终点与起点相连
        ctx.closePath();
        ctx.lineWidth = "3";
        ctx.fillStyle = '#E4EF00';
        ctx.strokeStyle = "red";
        ctx.fill();
        ctx.stroke();
    }
</script>

效果图：

三、让五角星动起来

在之前的基础上修改完善，让这个五角星动起来：

<script>
    // 使用id来寻找canvas元素
    var myCanvas = document.getElementById('myCanvas');
    if (myCanvas.getContext) {
        // 创建context对象
        // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
        var ctx = myCanvas.getContext("2d");
        var horn = 5; // 画5个角
        var angle = 360/horn; // 五个角的度数
        // 两个圆的半径
        var R = 200;
        var r = 80;
        // 坐标
        var x = 200;
        var y = 200;
        var rot = 10;
        
        function drawStar(ctx, R, r, rotate){
            // beginPath：开始绘制一段新的路径
            ctx.beginPath();
            for (var i = 0; i < horn; i++) {
                // 角度转弧度：角度/180*Math.PI
                var roateAngle = i * angle - rotate; // 旋转动起来
                // 外圆顶点坐标
                ctx.lineTo(Math.cos((18 + roateAngle) / 180 * Math.PI) * R + x, -Math.sin((18 + roateAngle) / 180 * Math.PI) * R + y);
                // 內圆顶点坐标
                ctx.lineTo(Math.cos((54 + roateAngle) / 180 * Math.PI) * r + x, -Math.sin((54 + roateAngle) / 180 * Math.PI) * r + y);
            }
            // closePath：关闭路径，将路径的终点与起点相连
            ctx.closePath();
            ctx.lineWidth = "3";
            ctx.fillStyle = '#E4EF00';
            ctx.strokeStyle = "red";
            ctx.fill();
            ctx.stroke();
        }
        drawStar(ctx, R, r, 20);
        
        // setInterval(function (){
        //     ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
        //     drawStar(ctx, R, r, rot);
        //     rot += 2;
        // }, 30);

        // 更加流畅的动画：window.requestAnimationFrame
        function step(){
            ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
            drawStar(ctx, R, r, rot);
            rot += 1;
            window.requestAnimationFrame(step);
        }
        window.requestAnimationFrame(step);
    }
</script>