将各种线宽应用于一个 canvas 中的重复分段对角线？

Question

我已经编写了 canvas 尺寸为 1000 x 800 像素的代码。首先，我应用了一个可以正常工作的 lineair 渐变。随后我编写了代码以在重复段中应用对角线，其中有一点 javascript 这也可以正常工作，因为我想 change/manipulate 每段的线宽我相应地调整每段的 x 和 y 坐标。不幸的是，我尝试应用的线宽更改没有像我期望的那样工作或正确渲染，我尝试通过应用 0、1、2 范围内的各种线宽来改变或操纵线段，但是大多数线段显示相同的线宽.

以下是我的 html 代码，生成的页面向您显示一个 html 页面，该页面以我尝试绘制的图像开头 canvas 下面是我的结果，或者您可以查看milton-chocolate.nl 上的 jpg 以查看我在 canvas.

中试图完成的工作

此外还有一个已连接的样式表，但我还没有在其中输入任何内容。

是否有人可以看看我的代码并解决我的线宽问题？

亲切的问候 spalburg

<!DOCTYPE html><head><link type ="text/css" rel="stylesheet" href="stylesheet.css"/><title>Milton-Chocolate.nl</title></head><body style="background-color: #3c1007; text-align: center
    "><img src = "130418-MC.jpg">
        <br>
<canvas id="myCanvas" width="1000" height="800" style="border: 0px"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // Create gradient
    var grd = ctx.createLinearGradient(0,0,1000,800);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"magenta");
    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(0,0,1000,800);
    </script>

<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 2;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 50);
        cx.lineTo(40+i, 0);
    }
cx.stroke();
    </script>

<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 1;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 100);
        cx.lineTo(80+i, 0);
    }
cx.stroke();
    </script>

<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 150);
        cx.lineTo(120+i, 0);
    }
cx.stroke();
    </script>

<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 1;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 200);
        cx.lineTo(160+i, 0);
    }
cx.stroke();
    </script>

<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.LineWidth = 2;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 250);
        cx.lineTo(200+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 300);
        cx.lineTo(240+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 350);
        cx.lineTo(280+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 400);
        cx.lineTo(320+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 450);
        cx.lineTo(360+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 500);
        cx.lineTo(400+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 550);
        cx.lineTo(440+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 600);
        cx.lineTo(480+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 650);
        cx.lineTo(520+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 700);
        cx.lineTo(560+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 750);
        cx.lineTo(600+i, 0);
    }
cx.stroke();
    </script>
<script>
    var cx = document.querySelector("Canvas").getContext("2d");
    cx.beginPath();
    cx.lineWidth = 0;
    for (var i = -60; i < 1000; i += 5) {
        cx.moveTo(0+i, 800);
        cx.lineTo(640+i, 0);
    }
cx.stroke();
    </script>

</body></html>

Answer 1

首先，尝试重新使用代码，例如通过定义函数。

你的问题是 beginPath 和 stroke 对所有行只执行一次。相反，您需要对每一行都这样做，因为 lineWidth 已更新。

Here's a JSFiddle 实施（我稍微改变了颜色线的粗细以使效果更明显）。

将各种线宽应用于一个 canvas 中的重复分段对角线？

applying various line widths to repetitive segmented diagonal lines in one canvas?

javascript

html

canvas

html5-canvas

javascript-objects