1回答

• 

  哈士奇你怕吗

  2018-08-27 15:02:39

  对源代码修改：

  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