多视角3D可旋转的HTML5 Logo动画

2020-04-24 19:52:31易采站长站整理

   {   
      // manually clear bg – as we want to render some extra goodies   
      ctx.clearRect(0, 0, canvas.width, canvas.height);   
  
      // draw bg effect before K3D does its 3D rendering   
      ctx.save();   
      ctx.translate(canvas.width/2, canvas.height/2);   
      ctx.rotate(rotationOffset);   
  
      // first fill pass – outer rays   
      var RAYCOUNT = 24;   
      ctx.fillStyle = "#eee";   
      ctx.beginPath();   
      for (var i=0; i<RAYCOUNT; i++)   
      {   
         // rotate context   
         ctx.rotate(TWOPI / RAYCOUNT);   
         ctx.moveTo(0, 0);   
         ctx.lineTo(-20, len);   
         ctx.lineTo(20, len);   
      }   
      ctx.closePath();   
      ctx.fill();   
      // second fill pass – inner rays   
      ctx.fillStyle = "#fff";   
      ctx.beginPath();   
      for (var i=0; i<RAYCOUNT; i++)   
      {   
         // rotate context   
         ctx.rotate(TWOPI / RAYCOUNT);   
         ctx.moveTo(0, 0);   
         ctx.lineTo(-15, len);   
         ctx.lineTo(15, len);   
      }   
      ctx.closePath();