JS随机化lineTo答案

【问题标题】：JS randomize lineToJS随机化lineTo
【发布时间】：2014-01-09 16:23:48
【问题描述】：

我需要随机化形状的坐标。我知道我需要以某种方式介绍 Math.floor(Math.Random * num);在那里排队，但我所做的一切似乎都不起作用。

这是我试图随机化的带有填充坐标的块。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth="5";
ctx.strokeStyle="black";  
ctx.moveTo;
ctx.lineTo(100,20);
ctx.lineTo(30,400);
ctx.lineTo(300,40);
ctx.lineTo(10,20);
ctx.stroke();

出于某种原因，我已经搜索和搜索并没有直接找到任何东西。抱歉，这也是一个非常基本的问题，我对此很陌生，还在学习基础知识。

提前谢谢你

【问题讨论】：

你试过什么？它是如何不起作用的（错误、不良行为等）？

标签： javascript random draw

【解决方案1】：

这是一个fiddle，显示了我在下面解释的内容。

检查 this page 以了解有关 Canvas 的语法。

如果您希望能够快速轻松地指定随机坐标，可以将其包装在一个函数中。

function randCoord(factor){
    return Math.random() * factor;
}

然后像这样使用它：

// all of these will go to different points
ctx.moveTo(randCoord(300),randCoord(100));
ctx.lineTo(randCoord(300),randCoord(100));
ctx.lineTo(randCoord(300),randCoord(100));
ctx.lineTo(randCoord(300),randCoord(100));

您可以设置默认比例：

function randCoord(factor){
    if (factor == undefined){
        factor = 100;
    }
    return Math.random() * factor;
}

这将允许您简单地编写函数名称。

ctx.lineTo(randCoord(),randCoord());

你也可以制作另一个函数，只是添加一个随机的附加点

function addRandomPoint(xFactor, yFactor) {
    ctx.lineTo( randCoord(xFactor), randCoord(yFactor) );
}

// these will all add new points
addRandomPoint();
addRandomPoint();
addRandomPoint(200, 300);
addRandomPoint(-100, 25);

然后将其包裹在循环中以提出许多观点

// this will add 10 new points
for (var i = 0; i < 10; i++) {
    addRandomPoint();
}

所以你可以这样做：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth="5";
ctx.strokeStyle="black";
    ctx.moveTo(10, 10);
for (var i = 0; i < 10; i++) {
    addRandomPoint();
}
ctx.stroke();

【讨论】：

非常感谢。我将把它整合起来，如果它工作正常，我会告诉你。我会绿色你的答案，但我还没有赢得我的条纹。再次欢呼。
不客气！ @user3178364 你能接受答案吗？您可能无法对其进行投票，但您应该可以选择复选标记。