Question

我需要随机化形状的坐标。我知道我需要以某种方式介绍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();

我搜索并搜索过，并且由于某些原因没有直接找到这个。对不起，这也是一个基本问题，我对此非常陌生，并且还在学习基础知识。

提前谢谢

Answer 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();

JS随机化lineTo

1 个答案: