H5+javascript 动态绘制五角星

news/2024/7/19 14:47:25 标签: canvas, html5, js

原理

手动画五角星感觉谁都会。
在这里插入图片描述
这不是有手就行，简简单单。可是用代码画图应该怎样做呢？
其实也很简单在H5画布上无非就是找点，然后按一定的顺序连接这些点。那么问题来了点怎么找啊？
给你整副图，一看就明白了。

懂了吧，这不就是圆上的五个点么，找出来不就行了。圆的方程高中生都张口就来(x-a)²+(y-b)²=r²。不过这好像没啥用因为我们想要坐标点。在稍微那么仔细一看，这不是将整个圆平分了5份吗。每个1/5弧对应的圆心角，这不是2π/5么。有了圆心角用极坐标求位置那不很nice。圆的极坐标公式：ρ²=x²+y²，x=ρcosθ，y=ρsinθ，tanθ=y/x，（x不为0）。自己设定一个半径 r（这也就决定了五角星的大小），这五个坐标就为（rcos(2π/5)，rsin(2π/5)）、（rcos(4π/5)，rsin(4π/5)）、（rcos(6π/5)，rsin(6π/5)）、（rcos(8π/5)，rsin(8π/5)）、（rcos(10π/5)，rsin(10π/5)）。（具体怎样看坐标系是怎样建立的，这些点的角度可以同时偏移相同的角度）
五个点有了然后确定连接顺序就行了。
在这里插入图片描述
顺序为1、3、5、2、4、1。用这用代码体现出来就行了。
(原理是上面说的那样但是由于起始绘制点和H5坐标系与数学上的坐标系有些差别的缘故，可能需要一些调整。比如：要画出上图那样的一个角指向正上方的五角星就需要对角度进行一些调整，所有的点的圆心角要减去90度。)

代码

画一个上图那样的五角星。

<!DOCTYPE html>
<html lang="zh-CN">
<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>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
    <script>
        var mycanvas = document.getElementById("mycanvas");
        var ctx = mycanvas.getContext("2d");
        var pas = Math.PI*2/5;
        var i=0;
        ctx.beginPath();
        ctx.moveTo(150, 10);//绘制的起点
        
        var id = setInterval(function(){//圆心位置(150,110)
            i += 2;
            if(i > 10){
                clearInterval(id);
            }
            ctx.lineTo(150 + 100 * Math.cos(i*pas-Math.PI/2), 110 + 100 * Math.sin(i*pas-Math.PI/2));
            ctx.strokeStyle = "red";
            ctx.stroke();
        },200)
    </script>
</body>
</html>