Question

学习java脚本和画布我是要做出步骤，可以绘制前两行。

我希望这次循环7次 7 p1和6 p2的所以基本上它下降了7次，共6次。

非常感谢您的光临。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1=7.5
var p2=10
ctx.moveTo(0,0);
ctx.lineTo(0,p1);
ctx.lineTo(p2,p1);
ctx.stroke();

</script>

</body>
</html>

Answer 1

我不确定你想要什么，但是我可以理解你想要重用代码片段。您可以使用函数执行此操作，并使用不同的点值调用该函数。希望它有所帮助。

canvaspointsfn = function(ctx, point1, point2,){
        var p1= point1
        var p2= point2
        ctx.lineTo(p2,p1);
        return ctx;
    };
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    //change vals 0f p1 p2 according your needs
    ctx= canvaspointsfn(ctx, p1, p2);
    ctx.stroke();

Answer 2

我不明白你的愿望。下一个代码会有帮助吗？

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var stepX=7.5
    var stepY=10
    var x=0,y=0;
    ctx.moveTo(0,0);
    for (var i = 0; i < 7; i++) {
        y += stepY
        ctx.lineTo(x,y);
        x += stepX;
        ctx.lineTo(x,y);
    }
    ctx.stroke();

</script>

</body>
</html>

Answer 3

这是解决方案。

    <!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1=7.5;
var p2=10;

var max = 7; // how many times

ctx.moveTo(0,0);

for(i=1; i <= max; i++){

ctx.lineTo(p2*(i-1),p1 * i);
ctx.lineTo(p2 * i,p1 * i);
}

ctx.stroke();


</script>

</body>
</html>

Answer 4

更宽松的方法解决问题，但可能易于理解。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var i=1;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1=7.5;
var p2=10;
var x=y=0;
ctx.moveTo(x,y);
for(i=1;i<14;i++){
    if(i%2==1){
        y+=p2;
        ctx.lineTo(x,y);
    }
    else{
        x+=p1;
        ctx.lineTo(x,y);
    }
}
ctx.stroke();
</script>
</body>
</html>

画布用循环绘制线条

4 个答案: