星星的动画
如何通过定时器实现星星从胖到瘦再到胖的效果?
就是好像让星星动起来
如何通过定时器实现星星从胖到瘦再到胖的效果?
就是好像让星星动起来
2018-08-23
对源代码修改:
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');
举报