canvas一笔画五角星（三角函数）

最新推荐文章于 2024-03-15 18:49:34 发布

a。。。。

最新推荐文章于 2024-03-15 18:49:34 发布

阅读量863

点赞数

CC 4.0 BY-SA版权

文章标签： vue canvas 五角星

本文链接：https://blog.youkuaiyun.com/i_comeaa/article/details/89433352

这篇博客探讨了如何在canvas上利用三角函数绘制五角星。通过边界反弹和固定轴速度，结合三角函数调整另一轴的速度，实现了一笔画五角星的效果。文章以一个构造函数为起点，详细阐述了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一篇讲canvas中三角函数的应用，首先讲一下思路，设置边界处理，应用边界反弹来实现方向的改变，固定x轴或y轴的速度，然后根据三角函数来确定另一个速度，可以参考下图来整理思路。在这里插入图片描述
先定义一个构造函数

class rain{
    constructor(props){
        this.x = 0;
        this.y = 0;
        this.r = 1;
        this.vx = 0;
        this.vy = 0;
        this.rotation = 0;
        this.flag = 1;
        this.fillStyle = `rgba(111,122,111,0.8)`;
        this.strokeStyle = `rgba(0,0,0,0)`;
        Object.assign(this,props)
        return this;
    }
    createRain(ctx){
        let {x,y,r} = this;
        ctx.beginPath();
        ctx.arc(x,y,r,0,Math.PI*2,true);
        ctx.closePath();
        return this;
    }
    rander(ctx){
        let {fillStyle,strokeStyle,rotation,x,y} = this;
        ctx.save();
        ctx.fillStyle = fillStyle;
        ctx.strokeStyle = strokeStyle;
        ctx.translate(x,y);
        ctx.rotate(rotation);
        this.createRain(ctx);