画布鼠标移动答案

【问题标题】：Canvas mouse move画布鼠标移动
【发布时间】：2013-12-26 16:32:27
【问题描述】：

也许你可以帮助我，我需要用 jquery 和 canvas 创建一个动画。所以，我想在鼠标移动时改变我的画布元素的颜色，颜色 rgb 必须是随机的，并且随着鼠标移动的变化而改变。

这是我的代码（画布 + 查询）：

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(',')+')");
    });

【问题讨论】：

标签： javascript jquery canvas mousemove

【解决方案1】：

你没有正确构建字符串：

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

一种判断方法是注意此站点上的语法检测器如何为代码着色。在您的情况下，它将整个表达式着色为单个字符串。

【讨论】：

【解决方案2】：

假设您希望 RGB 是真正随机的：

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

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

或者，正如您的代码所提出的，让它响应光标位置；你有什么应该工作，你只需要在这里更正引号：

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

【讨论】：

感谢您的回答，它的工作！对不起，我是初学者，感谢大家，我学到了很多！