【Canvas技法】辐射式多道光影的实现

【用余弦函数实现辐射四道光】

成图：

代码：

        const R=180;// 基准尺寸
        
        // 十字纹
        ctx.save();
        r=R;
        var N=3600;
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;
            var a=createPt(r*Math.cos(theta),r*Math.sin(theta));

            // 用余弦函数实现周期变换，将θ角乘2以缩短周期，使用绝对值以转负为正，0.3为可调常数项
            var alpha=Math.abs(Math.cos(theta*2))*0.3;
            ctx.strokeStyle="rgba(188,187,189,"+alpha+")";// 控制直线的半透明度以调节明暗
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(a.x,a.y);
            ctx.stroke();
        }

 

【用余弦函数实现辐射六道光】

成图：

代码：

        const R=180;// 基准尺寸
        
        // 六芒纹
        ctx.save();
        r=R;
        var N=3600;
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;
            var a=createPt(r*Math.cos(theta),r*Math.sin(theta));

            // 用余弦函数实现周期变换，将θ角乘3以缩短周期，使用绝对值以转负为正，0.3为可调常数项
            var alpha=Math.abs(Math.cos((theta-Math.PI/6)*3))*0.3;
            ctx.strokeStyle="rgba(188,187,189,"+alpha+")";// 控制直线的半透明度以调节明暗
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(a.x,a.y);
            ctx.stroke();
        }

 

【用锯齿函数实现辐射四道光】

成图：

代码：

const R=180;// 基准尺寸
        
        // 十字纹
        ctx.save();
        r=R;
        var N=3600;
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;
            var a=createPt(r*Math.cos(theta),r*Math.sin(theta));

            // 用锯齿函数实现周期变换，0.3为可调常数项
            var alpha=(((i+450)%900)/900);
            if(alpha>0.5){
                alpha=(1-alpha);
            }
            ctx.strokeStyle="rgba(188,187,189,"+alpha+")";// 控制直线的半透明度以调节明暗
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(a.x,a.y);
            ctx.stroke();
        }

 

【用锯齿函数实现辐射六道光】

成图：

代码：

const R=180;// 基准尺寸
        
        // 十字纹
        ctx.save();
        r=R;
        var N=3600;
        for(var i=0;i<N;i++){
            var theta=Math.PI*2/N*i;
            var a=createPt(r*Math.cos(theta),r*Math.sin(theta));

            // 用锯齿函数实现周期变换，0.3为可调常数项
            var alpha=(((i)%600)/600);
            if(alpha>0.5){
                alpha=(1-alpha);
            }
            ctx.strokeStyle="rgba(188,187,189,"+alpha+")";// 控制直线的半透明度以调节明暗
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(a.x,a.y);
            ctx.stroke();
        }

 

END