2回答

• 

  淚雨

  2016-10-24 11:27:52

  已采纳

  <script type="text/javascript">

     

          var searchLight={x:400,y:400,radius:150,vx:Math.random()*5+10,vy:Math.random()*5+10};

  window.onload=function(){

  var canvas=document.getElementById('canvas');

  var context=canvas.getContext('2d');

              canvas.width=800;

              canvas.height=800;

  
  

              setInterval(function(){

              draw(context);

              update(canvas.width,canvas.height);

              },50);

  
  

  }

  
  

  function draw(cxt){

  var canvas=cxt.canvas;

  cxt.clearRect(0,0,canvas.width,canvas.height);

  cxt.save();

              cxt.beginPath();

  cxt.fillStyle="#000";

  cxt.fillRect(0,0,canvas.width,canvas.height);

  cxt.beginPath();

  cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,Math.PI*2);

  cxt.fillStyle="#FFF";

  cxt.fill();

  cxt.clip();

  
  

  cxt.font="bold 150px Arial";

  cxt.textAlign="center";

  cxt.textBaseLine="middle";

  cxt.fillStyle="#ff6600";

  cxt.fillText("CANVAS",canvas.width/2,canvas.width/4);

  cxt.fillText("CANVAS",canvas.width/2,canvas.width/2);

  cxt.fillText("CANVAS",canvas.width/2,canvas.width*3/4);

  
  

  cxt.restore();

  
  

  }

  
  

  function update(canvasWidth,canvasHeight){

     searchLight.x+=searchLight.vx;

     searchLight.y+=searchLight.vy;

    if(searchLight.x-searchLight.radius<=0){

                searchLight.vx=-searchLight.vx;

                searchLight.x=searchLight.radius;

    }

      if (searchLight.x+searchLight.radius>=canvasWidth) {

                     searchLight.vx=-searchLight.vx;

                     searchLight.x=canvasWidth-searchLight.radius;

      }

      if(searchLight.y-searchLight.radius<=0){

      searchLight.vy=-searchLight.vy;

      searchLight.y=searchLight.radius;

      }

      if (searchLight.y+searchLight.radius>=canvasHeight) {

                     searchLight.vy=-searchLight.vy;

                     searchLight.y=canvasHeight-searchLight.radius;

      }

  
  

  }

  
  

  </script>

  我把完整的给你，你自己对下哪里不同。

  3 0

  就叫毛毛怎么... 回复JEFT

  在cxt.clip()上面加一对cxt.save() 和 cxt.restore()就能正常显示文字了

  2017-01-11 23:55:11

  共 3 条回复 >

• 

  淚雨

  2016-10-24 15:41:22

  那就不知道了，我的可以

  0 0