星星的動畫
如何通過定時器實現星星從胖到瘦再到胖的效果？
就是好像讓星星動起來
Elias丿純黑
2018-08-23
1 回答
舉報
0/150
提交
取消
2018-08-27
對源代碼修改：
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');