Javascript 画布使用循环绘制线_Javascript_Html_Canvas

Javascript 画布使用循环绘制线

javascript html canvas

Javascript 画布使用循环绘制线,javascript,html,canvas,Javascript,Html,Canvas,只是学习java脚本和画布。我要做步骤，能画出前两条线我希望这个循环7次。 7个p1和6个p2 基本上如此。它下降7次，横穿6次非常感谢您的关注您的浏览器不支持HTML5画布标记。 var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）；变量p1=7.5 变量p2=10 ctx.moveTo（0,0）； ctx.lineTo（0，p1）； ctx.lineTo（p2，p1）； ctx.stroke（

只是学习java脚本和画布。
我要做步骤，能画出前两条线

我希望这个循环7次。
7个p1和6个p2
基本上如此。
它下降7次，横穿6次

非常感谢您的关注


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量p1=7.5
变量p2=10
ctx.moveTo（0,0）；
ctx.lineTo（0，p1）；
ctx.lineTo（p2，p1）；
ctx.stroke（）；

我不确定您想要什么，但从我的理解来看，您希望重用代码片段。您可以通过使用函数并使用不同的点值调用该函数来实现。希望能有帮助

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

我不确定您想要什么，但从我所能理解的情况来看，您希望重用代码片段。您可以通过使用函数并使用不同的点值调用该函数来实现。希望能有帮助

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

我不明白你的愿望。下一个代码有用吗

<!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>


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var stepX=7.5
var stepY=10
变量x=0，y=0；
ctx.moveTo（0,0）；
对于（变量i=0；i<7；i++）{
y+=stepY
ctx.lineTo（x，y）；
x+=stepX；
ctx.lineTo（x，y）；
}
ctx.stroke（）；

我不明白你的愿望。下一个代码有用吗

<!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>


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var stepX=7.5
var stepY=10
变量x=0，y=0；
ctx.moveTo（0,0）；
对于（变量i=0；i<7；i++）{
y+=stepY
ctx.lineTo（x，y）；
x+=stepX；
ctx.lineTo（x，y）；
}
ctx.stroke（）；

以下是解决方案


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量p1=7.5；
var p2=10；
var max=7；//多少次
ctx.moveTo（0,0）；
对于（i=1；i，这里是解决方案


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量p1=7.5；
var p2=10；
var max=7；//多少次
ctx.moveTo（0,0）；
对于（i=1；i而言，这是一个更为冗长的问题，但可能更容易理解
<!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>


您的浏览器不支持HTML5画布标记。
var i=1；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量p1=7.5；
var p2=10；
var x=y=0；
ctx.moveTo（x，y）；
对于（i=1；i而言，这是一个更为冗长的问题，但可能更容易理解
<!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>


您的浏览器不支持HTML5画布标记。
var i=1；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量p1=7.5；
var p2=10；
var x=y=0；
ctx.moveTo（x，y）；
对于（i=1；i是否要创建类似楼梯的直线？是否要创建类似楼梯的直线？ctx.lineTo（p2*（i-1），p1*i）；if（ictx.lineTo（p2*（i-1），p1*i）；if（i