Question

我的画布上有问题。我想改变颗粒的颜色。目前它们是黑色的。我该如何改变..？这是我的代码，如果您有任何解决方案，请告诉我。我的画布上有问题。我想改变颗粒的颜色。目前它们是黑色的。我该如何改变..？这是我的代码，如果您有任何解决方案，请告诉我。 http://jsfiddle.net/gbcL0uks/

<head>
  <title>
    Text Particles
  </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css">
  <meta property="og:title" content="Text Particles" />
  <meta property="og:description" content="Some cool canvas pixel manipulation" />
  <meta property="og:image" content="http://william.hoza.us/images/text-small.png" />
  <style>
    @import url('https://fonts.googleapis.com/css?family=Bree+Serif');
    body {
      font-family: 'Bree Serif', serif;
    }

    .float {
      position: absolute;
      left: 20px;
    }

    .menu {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
    }

    .fa-bars {
      font-size: 24px;
      border: 2px solid #333333;
      padding: 12px;
      transition: .4s;
    }

    .fa-bars:hover {
      background: #333333;
      color: #f7d600;
    }

    .overlay {
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: -100%;
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.9);
      overflow-x: hidden;
      transition: 0.5s;
    }

    .overlay-content {
      position: relative;
      top: 50%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
      transform: translate(0, -100%);
    }

    .overlay a {
      padding: 8px;
      text-decoration: none;
      font-size: 6rem;
      color: #818181;
      display: inline-block;
      transition: 0.3s;
      margin: 0 3rem;
    }

    .overlay a:hover,
    .overlay a:focus {
      color: #f1f1f1;
    }

    .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 0;
      font-size: 60px;
    }

    @media screen and (max-height: 450px) {
      .overlay a {
        font-size: 20px
      }
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 0;
      }
    }
  </style>
</head>

<body style="margin:0px; background:#f7d600;">
  <div class="float">
    <h1>Herbialis</h1>
  </div>
  <!-- <div class="menu">
    <i class="fa fa-bars"></i>
  </div> -->
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
      <a href="#">About</a>
      <a href="#">Products</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div class="menu">
    <i class="fa fa-bars" onclick="openNav()"></i>
  </div>
  <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;">
  </canvas>
  <textarea id="wordsTxt" style="position:absolute;left:-100;top:-100;" onblur="init();" onkeyup="init();" onclick="init();"></textarea>

  <script type="text/javascript">
    var l = document.location + "";
    l = l.replace(/%20/g, " ");
    var index = l.indexOf('?t=');
    if (index == -1) document.location = l + "?t=Hello world";

    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);
    }

    function readWords() {
      words = $('wordsTxt').value;
      txt = words.split('\n');
    }

    function init() {
      readWords();

      var fontSize = 200;
      var wordWidth = 0;
      do {
        wordWidth = 0;
        fontSize -= 5;
        wordCtx.font = fontSize + "px sans-serif";
        for (var i = 0; i < txt.length; i++) {
          var w = wordCtx.measureText(txt[i]).width;
          if (w > wordWidth) wordWidth = w;
        }
      } while (wordWidth > cw - 50 || fontSize * txt.length > ch - 50)

      wordCtx.clearRect(0, 0, cw, ch);
      wordCtx.textAlign = "center";
      wordCtx.textBaseline = "middle";
      for (var i = 0; i < txt.length; i++) {
        wordCtx.fillText(txt[i], cw / 2, ch / 2 - fontSize * (txt.length / 2 - (i + 0.5)));
      }

      var index = 0;

      var imageData = wordCtx.getImageData(0, 0, cw, ch);
      for (var x = 0; x < imageData.width; x += resolution) //var i=0;i<imageData.data.length;i+=4)
      {
        for (var y = 0; y < imageData.height; y += resolution) {
          i = (y * imageData.width + x) * 4;

          if (imageData.data[i + 3] > 128) {
            if (index >= pixels.length) {
              pixels[index] = new Pixel(x, y);
            } else {
              pixels[index].homeX = x;
              pixels[index].homeY = y;
            }
            index++;
          }
        }
      }

      pixels.splice(index, pixels.length - index);
    }

    function body_resize() {
      cw = document.body.clientWidth;
      ch = document.body.clientHeight;
      canv.width = cw;
      canv.height = ch;
      wordCanv.width = cw;
      wordCanv.height = ch;

      init();
    }

    wordsTxt.focus();
    wordsTxt.value = l.substring(index + 3);

    resHalfFloor = Math.floor(resolution / 2);
    resHalfCeil = Math.ceil(resolution / 2);

    body_resize();
    timer();
  </script>
  <script>
    function openNav() {
      document.getElementById("myNav").style.left = "0";
    }

    function closeNav() {
      document.getElementById("myNav").style.left = "-100%";
    }
  </script>



</body>

</html>

Answer 1

为图像数据添加3种颜色成分。例如，对于橙色：

    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 + 0] = 253; // Red component
            actualData[index + 1] = 106; // Green component
            actualData[index + 2] = 2;   // Blue component
            actualData[index + 3] = 255;
        }
    }

我的画布上有问题。我想改变颗粒的颜色。目前它们是黑色的。我该如何改变……？

1 个答案: