Fatal编程技术网

Javascript 鼠标移动时的变化

javascript

Javascript 鼠标移动时的变化,javascript,trianglify,Javascript,Trianglify,所以我在玩triangalify.js 我的目标是，当鼠标移动时，三角形画布的变化将发生变化 理论上很好，但实际上并不需要，我尝试了几种不同的代码格式，但实际上似乎无法让Triangalify尊重新的值 所以，希望有人能说明我做错了什么 //Do Traingle Canvas window.onload=函数（）{ 变量模式=三角形({ 宽度：window.innerWidth， 高度：window.innerHeight， 单元大小：120， 笔画宽度：1.3， 差异：0.75， 种子：“

所以我在玩triangalify.js

我的目标是，当鼠标移动时，三角形画布的变化将发生变化

理论上很好，但实际上并不需要，我尝试了几种不同的代码格式，但实际上似乎无法让Triangalify尊重新的值

所以，希望有人能说明我做错了什么

//Do Traingle Canvas
window.onload=函数（）{
变量模式=三角形({
宽度：window.innerWidth，
高度：window.innerHeight，
单元大小：120，
笔画宽度：1.3，
差异：0.75，
种子：“9rqsn”，
x_颜色：“蓝色”
});
var homecan=document.getElementById（'home'）；
appendChild（pattern.canvas（））；
document.onmousemove=（函数（）{
var onmousestop=函数（）{
变量模式=三角形({
差异：0.05
});
pattern.canvas（）
},
线
返回函数（）{
clearTimeout（线程）；
线程=设置超时（onmousestop，100）；
};
})();
};

下面是一个示例，在鼠标移动时颜色会成功更改。对于方差来说应该是一样的，尽管这似乎很难测试


<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<body>
<canvas id='mycanvas' width='200' height='200' style="border:1px solid Black;"></canvas>
<script type="text/javascript">
   window.onload = function () {
       var pattern = Trianglify({
           width: window.innerWidth,
           height: window.innerHeight,
           cell_size: 120,
           stroke_width: 1.3,
           variance: 0.75,
           seed: '9rqsn',
           x_colors: 'Blues'
       });

       pattern.canvas(document.getElementById('mycanvas'));
   };
   document.onmousemove = function () {
       var pattern = Trianglify({
           variance: 0.05,
           x_colors: 'Reds'
       });
       pattern.canvas(document.getElementById('mycanvas'));
   };
</script>
</body>
</html>




window.onload=函数（）{
变量模式=三角形({
宽度：window.innerWidth，
高度：window.innerHeight，
单元大小：120，
笔画宽度：1.3，
差异：0.75，
种子：“9rqsn”，
x_颜色：“蓝色”
});
canvas（document.getElementById（'mycanvas'）；
};
document.onmousemove=函数（）{
变量模式=三角形({
差异：0.05，
x_颜色：“红色”
});
canvas（document.getElementById（'mycanvas'）；
};


资料来源：

三角自述：

三角启动：

Html5画布：


OnMouseMove事件：
原始解决方案的问题是，OnMouseMove中新生成的画布没有显示在任何地方。您应该从第一次创建画布时就记住它，然后将其作为参数传递给pattern.canvas（…）调用：


window.onload = function() {
    var pattern = Trianglify({
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    });
    var homecan = document.getElementById('home');
    var canvas = pattern.canvas();
    homecan.appendChild(canvas);

    document.onmousemove = (function() {
      var onmousestop = function() {
          var pattern = Trianglify({
            width: window.innerWidth,
            height: window.innerHeight,
            variance: 0.05
          });
          pattern.canvas(canvas);
        },
        thread;

      return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 100);
      };
    })();
}



@pabrams的解决方案也不错，只是别忘了用id=“mycanvas”创建
元素。顺便说一句，您使用计时器所做的基本上是自制的去盎司实现（尽管正确！）：
在
onmousetop
函数中定义的
var模式对
window.onload
函数中定义的原始
模式没有影响。因此，它不会像您期望的那样修改现有画布。相反，您可以尝试删除旧画布并附加新画布。您可能还需要在此处添加所有选项，以使其按预期工作。（另外，您错过了
窗口.onload
函数的右大括号
}
。我想，这只是写问题时的输入错误。我在您的问题中也编辑了这个。）

完整演示：


//Do Traingle Canvas
window.onload=函数（）{
变量模式选项={
宽度：window.innerWidth，
高度：window.innerHeight，
单元大小：120，
笔画宽度：1.3，
差异：0.75，
种子：“9rqsn”，
x_颜色：“蓝色”
};
变量模式=三角形（模式选项）；
var homecan=document.getElementById（'home'）；
appendChild（pattern.canvas（））；
document.onmousemove=（函数（）{
var onmousestop=函数（）{
patternOptions.variance=0.05；
var pattern2=三角形（patternOptions）；
homecan.innerHTML=''；//清除现有画布
homecan.appendChild（pattern2.canvas（））；//追加新画布
},
线
返回函数（）{
clearTimeout（线程）；
线程=设置超时（onmousestop，100）；
};
})();
};



你能用codepen或其他什么地方制作一个有效的演示吗？包括必要的库等。谢谢你的帖子，我明天会有机会看一遍谢谢你的帖子，我明天会有机会看一遍。当然，如果还有什么不清楚的，请告诉我。谢谢你的帖子，我明天会有机会看一遍

    var patternOptions = {
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 120,
      stroke_width: 1.3,
      variance: 0.75,
      seed: '9rqsn',
      x_colors: 'Blues'
    };
    ...........
    ..........
        var onmousestop = function() {
          patternOptions.variance = 0.05;
          var pattern2 = Trianglify(patternOptions);
          homecan.innerHTML = ''; //Clear the existing canvas
          homecan.appendChild(pattern2.canvas()); //append the new canvas
        },
        thread;