星星的動(dòng)畫
如何通過定時(shí)器實(shí)現(xiàn)星星從胖到瘦再到胖的效果？
就是好像讓星星動(dòng)起來
Elias丿純黑
2018-08-23
1 回答
舉報(bào)
0/150
提交
取消
2018-08-27
對(duì)源代碼修改：
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;//? ?<-------------------這里添加要改變寬度的參數(shù)
cxt.stroke();
}
接下來定義動(dòng)畫：
function starAnimation( cxt ){? //? ?<-----------在這里定義canvas的畫布對(duì)象
var i=5;? //這里是控制動(dòng)畫的變量
var w=5;? ? //這個(gè)是要改變的寬度變量
??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);
}
接下來執(zhí)行定義好的動(dòng)畫就OK了
starAnimation(context);? // <-----------傳入? ?var context =canvas.getContext('2d');