canvas绘制五角星

最新推荐文章于 2024-08-12 17:44:32 发布

weixin_33749242

最新推荐文章于 2024-08-12 17:44:32 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yanxuan/p/6198607.html

canvas绘制五角星，其大致思路就是：

里面的五个点和外面的五个点为同一圆心，以该点为圆心，利用数学几何知识可知每个点角度，利用Math.cos()和Math.sin()可算出每个店的坐标，最后用lineTo把每个点连起来即成为了一个五角星

    function drawStar(context,r,R,x,y) {
　　//context：canvas画柄，r：小圆半径，R：大圆半径，x：圆心x左边，y：圆心y坐标
        context.beginPath();
        for (var i = 0; i < 5; i++) {
            context.lineTo(Math.cos((18 + i * 72 ) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 ) / 180 * Math.PI) * R + y);
            context.lineTo(Math.cos((54 + i * 72 ) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 ) / 180 * Math.PI) * r + y);
        context.closePath();
        context.fillStyle = '#fb3';
        context.strokeStyle = "#fd5";
        context.fill();
        context.stroke();
    }

这样，就能够10个点连接起来，组成了一个五角星。　　

转载于:https://www.cnblogs.com/yanxuan/p/6198607.html