Question

我是画布的新手，使用画布做一些很酷的动画。我从互联网上获取了一个代码，试图更改文本的颜色，但无法这样做。动画可以正常工作，但字体颜色正常

HTML PART

<body style="margin:0px;background-color:#3c818f">
  <canvas id="canv" onmousemove="canv_mousemove(event);" onmouseout="mx=-1;my=-1;">
    you need a canvas-enabled browser, such as Google Chrome
  </canvas>
  <canvas id="wordCanv" width="500px" height="500px" style="border:1px solid black;display:none; color: #616161">
  </canvas>
  <textarea id="wordsTxt" style="position:absolute;left:-100;top:-100;" onblur="init();" onkeyup="init();" onclick="init();"></textarea>

更新JAVASCRIPT

  var pixels=new Array();
    var canv=$('canv');
    var ctx=canv.getContext('2d');
    var wordCanv=$('wordCanv');
    var wordCtx=wordCanv.getContext('2d');
    var mx=-1;
    var my=-1;
    var words="";
    var txt=new Array();
    var cw=0;
    var ch=0;
    var resolution=1;
    var n=0;
    var timerRunning=false;
    var resHalfFloor=0;
    var resHalfCeil=0;

    function canv_mousemove(evt)
    {
      mx=evt.clientX-canv.offsetLeft;
      my=evt.clientY-canv.offsetTop;
    }

    function Pixel(homeX,homeY)
    {
      this.homeX=homeX;
      this.homeY=homeY;

      this.x=Math.random()*cw;
      this.y=Math.random()*ch;

      //tmp
      this.xVelocity=Math.random()*10-5;
      this.yVelocity=Math.random()*10-5;
    }
    Pixel.prototype.move=function()
    {
      var homeDX=this.homeX-this.x;
      var homeDY=this.homeY-this.y;
      var homeDistance=Math.sqrt(Math.pow(homeDX,2) + Math.pow(homeDY,2));
      var homeForce=homeDistance*0.01;
      var homeAngle=Math.atan2(homeDY,homeDX);

      var cursorForce=0;
      var cursorAngle=0;

      if(mx >= 0)
      {
        var cursorDX=this.x-mx;
        var cursorDY=this.y-my;
        var cursorDistanceSquared=Math.pow(cursorDX,2) + Math.pow(cursorDY,2);
        cursorForce=Math.min(10000/cursorDistanceSquared,10000);
        cursorAngle=Math.atan2(cursorDY,cursorDX);
      }
      else
      {
        cursorForce=0;
        cursorAngle=0;
      }

      this.xVelocity+=homeForce*Math.cos(homeAngle) + cursorForce*Math.cos(cursorAngle);
      this.yVelocity+=homeForce*Math.sin(homeAngle) + cursorForce*Math.sin(cursorAngle);

      this.xVelocity*=0.92;
      this.yVelocity*=0.92;

      this.x+=this.xVelocity;
      this.y+=this.yVelocity;
    }

    function $(id)
    {
      return document.getElementById(id);
    }

    function timer()
    {
      if(!timerRunning)
      {
        timerRunning=true;
        setTimeout(timer,33);
        for(var i=0;i<pixels.length;i++)
        {
          pixels[i].move();
        }

        drawPixels();
        wordsTxt.focus();

        n++;
        if(n%10==0 && (cw!=document.body.clientWidth || ch!=document.body.clientHeight)) body_resize();
        timerRunning=false;
      }
      else
      {
        setTimeout(timer,10);
      }
    }

    function drawPixels()
    {
      var imageData=ctx.createImageData(cw,ch);
      var actualData=imageData.data;

      var index;
      var goodX;
      var goodY;
      var realX;
      var realY;

      for(var i=0;i<pixels.length;i++)
      {
        goodX=Math.floor(pixels[i].x);
        goodY=Math.floor(pixels[i].y);

        for(realX=goodX-resHalfFloor; realX<=goodX+resHalfCeil && realX>=0 && realX<cw;realX++)
        {
          for(realY=goodY-resHalfFloor; realY<=goodY+resHalfCeil && realY>=0 && realY<ch;realY++)
          {
            index=(realY*imageData.width + realX)*4;
            actualData[index+3]=255;
          }
        }
      }

      imageData.data=actualData;
      ctx.putImageData(imageData,0,0);

这些是我要编写文本动画的代码。请帮助我

无法更改画布文本的颜色

0 个答案: