【Canvas与艺术】旋转弯曲色带效果（类似曲叶电风扇）

【关键点】

用复数计算得到贝塞尔二次曲线的控制点

【效果图】

【核心代码】

// 偏转角
const bias=(Math.PI/9);
var xb=Math.cos(bias);
var yb=Math.sin(bias);

// 画曲线电风扇
for(var i=0;i<12;i++){
    var start=i*Math.PI/6+this.theta;
    var x1=250*Math.cos(start);
    var y1=250*Math.sin(start);
    var c1x=(x1*xb-y1*yb)/2;// 通过复数计算而来
    var c1y=(x1*yb+y1*xb)/2;// 通过复数计算而来

    var end=start+Math.PI/12;
    var x2=250*Math.cos(end);
    var y2=250*Math.sin(end);
    var c2x=(x2*xb-y2*yb)/2;// 通过复数计算而来
    var c2y=(x2*yb+y2*xb)/2;// 通过复数计算而来

    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.quadraticCurveTo(c1x,c1y,x1,y1);
    ctx.arc(0,0,250,start,end,false);
    ctx.quadraticCurveTo(c2x,c2y,0,0);
    ctx.closePath();
    ctx.strokeStyle="yellow";
    ctx.stroke();
    ctx.fillStyle="orange";
    ctx.fill();
}

【全部代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>旋转的弯曲色带效果</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body οnlοad="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
            <img id="myImg" src="125.png" style="display:none;"/>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=300;
const HEIGHT=360;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  
    canvas.width=WIDTH;
    canvas.height=HEIGHT;

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央

    // 准备
    stage=new Stage();    
    stage.init();

    // 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     

    // 循环
    if(true){
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    this.theta=0;

    // 初始化
    this.init=function(){
        
    }

    // 更新
    this.update=function(){
        this.theta+=Math.PI/180;
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    

        ctx.fillStyle="yellow";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

        ctx.font = "8px consolas";
        ctx.fillStyle="black";
        ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);
    }

    // 画前景
    this.paintFg=function(ctx){
        // 偏转角
        const bias=(Math.PI/9);
        var xb=Math.cos(bias);
        var yb=Math.sin(bias);

        // 画曲线电风扇
        for(var i=0;i<12;i++){
            var start=i*Math.PI/6+this.theta;
            var x1=250*Math.cos(start);
            var y1=250*Math.sin(start);
            var c1x=(x1*xb-y1*yb)/2;// 通过复数计算而来
            var c1y=(x1*yb+y1*xb)/2;// 通过复数计算而来

            var end=start+Math.PI/12;
            var x2=250*Math.cos(end);
            var y2=250*Math.sin(end);
            var c2x=(x2*xb-y2*yb)/2;// 通过复数计算而来
            var c2y=(x2*yb+y2*xb)/2;// 通过复数计算而来

            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.quadraticCurveTo(c1x,c1y,x1,y1);
            ctx.arc(0,0,250,start,end,false);
            ctx.quadraticCurveTo(c2x,c2y,0,0);
            ctx.closePath();
            ctx.strokeStyle="yellow";
            ctx.stroke();
            ctx.fillStyle="orange";
            ctx.fill();
        }

        //---- 以下为装饰五角星,非关键代码

        // 画白底五角星
        draw5Star(ctx,0,0,45,"white");

        // 画立体五角星
        const R=40;// 五角星外角半径
        const r=15;// 五角星内角半径
        ctx.save();
        ctx.rotate(Math.PI/10);
        for(let i=0;i<5;i++){
            var alpha=i*2*Math.PI/5-Math.PI/5;
            var beta=i*2*Math.PI/5;            

            // 画红色五片
            var x1=R*Math.cos(alpha);
            var y1=R*Math.sin(alpha);
            var x2=r*Math.cos(beta);
            var y2=r*Math.sin(beta);
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.closePath();
            if(this.currLightPos==i){
                ctx.fillStyle="red";
            }else{
                ctx.fillStyle="rgb(206,0,0)";
            }
            
            ctx.fill();

            // 画黄色五片
            var gama=(i)*2*Math.PI/5+Math.PI/5;
            var x3=R*Math.cos(gama);
            var y3=R*Math.sin(gama);

            ctx.beginPath();
            ctx.moveTo(0,0);            
            ctx.lineTo(x3,y3);
            ctx.lineTo(x2,y2);
            ctx.closePath();
            if(this.currLightPos==i){
                ctx.fillStyle="rgb(249,249,0)";
            }else{
                ctx.fillStyle="rgb(255,102,102)";
            }
            ctx.fill();
        }
        ctx.restore();
    }
}

// 函数，用于取得颜色
function getColor(index){
    var arr=["yellow","orange"];
    return arr[index % arr.length];
}

// 画实心五角星的函数
function draw5Star(ctx,x,y,r,color){
    ctx.save()
    ctx.translate(x-r,y-r);    
    ctx.beginPath();
    ctx.moveTo(r, 0);
    ctx.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
    ctx.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
    ctx.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
    ctx.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
    ctx.lineTo(r, 0);
    ctx.closePath();
    ctx.fillStyle=color;
    ctx.fill();
    ctx.restore();
}

/*---------------------------------------------
能够随便批评的东西往往质量有保障，
如苹果机、可乐；
不能随便批评的东西往往质量都很差，
如寂静无声或默认点赞的评论区所在的商品。
----------------------------------------------*/
//-->
</script>