畫布鼠標移動

Question

也許您可以幫我，我需要用jquery和canvas創建動畫。 因此，我想在鼠標移動時更改畫布元素的顏色，顏色rgb必須是隨機的，並且在mousemove更改時也會更改。

這是我的代碼（畫布+查詢）：

window.onload = function()
{
    var canvas  = document.getElementById('canvas'),
    context = canvas.getContext('2d');

      function drawanim(color){

      context.fillStyle=color;
      context.beginPath();
      context.moveTo(106,20);
      context.lineTo(130,67);
      context.lineTo(182,74);
      context.lineTo(144,111);
      context.lineTo(153,163);
      context.lineTo(106,139);
      context.lineTo(60,163);
      context.lineTo(69,111);
      context.lineTo(31,74);
      context.lineTo(83,67);
      context.lineTo(106,20);
      context.fill();
    }
    drawanim("color");

// SOURIS POSITION
      var $canvas = $('#canvas'),
      w = 0,h = 0,
      rgb = [],
      getWidth = function() {
          w = $win.width();
          h = $win.height();
      };
    $('#canvas').resize(getWidth).mousemove(function (e) {
        rgb = [
              Math.round(e.pageX/w * 255),
              Math.round(e.pageY/h * 255),
              150
          ];

          drawanim("rgb('+rgb.join(',')+')");
    });

Answer 1

您沒有正確構建字符串：

  drawanim("rgb(" + rgb.join(",") + ")");

一種告訴方法是注意該站點上的語法檢測器如何為代碼着色。 在您的情況下，它將整個表達式着色為單個字符串。

Answer 2

假設您希望RGB是真正隨機的：

rgb = [
    0 | Math.random() * 256,
    0 | Math.random() * 256,
    0 | Math.random() * 256
];

drawanim("rgb(" + rgb.join(",") + ")");

或者，如您的代碼所示，它可以響應光標位置； 您應該使用的工具，只需在這里更正引號即可：

drawanim("rgb(" + rgb.join(",") + ")");