为了账号安全,请及时绑定邮箱和手机立即绑定

星星的动画

如何通过定时器实现星星从胖到瘦再到胖的效果?


就是好像让星星动起来

正在回答

1 回答

对源代码修改:

function drawStar(cxt,r,R,x,y,color,rot, lineWidth){

cxt.clearRect(0,0,800,800);//   <-------------------------在这里清除画布

cxt.beginPath();

    for (let i = 0; i < 5; i++) {

        cxt.lineTo(Math.cos((18 + i * 72- rot) / 180 * Math.PI) * R + x,

        -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y,

    );

        cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,

        -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y,

    );

}

cxt.closePath();

cxt.strokeStyle=color;

cxt.lineWidth = lineWidth;//   <-------------------这里添加要改变宽度的参数

cxt.stroke();

}

接下来定义动画:

function starAnimation( cxt ){  //   <-----------在这里定义canvas的画布对象

var i=5;  //这里是控制动画的变量

var w=5;    //这个是要改变的宽度变量

  setInterval(function () {

    if(i>5){

        drawStar(cxt, 200, 300, 400, 400, 'red', 30, w+=3);

        i++;

    }else{

        drawStar(cxt, 200, 300, 400, 400, 'red', 30, w-=3);

        i++;

    }

        if (i > 10) {

            i = 1;

        }

    }, 100);

}

接下来执行定义好的动画就OK了

starAnimation(context);  // <-----------传入   var context =canvas.getContext('2d');



0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

星星的动画

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信