Question

所以我的情况如下：我有一组数据，每个条目都有一个最大数字和一个最小数字。

我在画布的帮助下可视化这些数据。我试图循环数据并创建两行，一行为最小值，另一行为最大值。对于其中一个，这个工作正常，但我不能创建两行而不循环数据两次。

函数lineTo（）只是从它停止的最后一个点开始绘制一条线。使用这意味着单行将在最小值和最大值之间曲折。

有没有办法让两个'钢笔'同时绘制单独的线？

Answer 1

＆＃13;

@Repository
class PlatformConfigRepository
{
    ...

    @Cacheable("PlatformConfigRepository::getAll")
    public Map<Integer, PlatformConfig> getAll()
    {
        return something();
    }

    ...
}

＆＃13;

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var Point = function(x,y){
 this.x = x;
 this.y = y;
}

drawLine(new Point(10,10),new Point(100,100),'red');
drawLine(new Point(60,10),new Point(150,150),'green');


function drawLine(stPoint, endPoint,color){
  ctx.beginPath();
  ctx.moveTo(stPoint.x,stPoint.y);
  ctx.lineTo(endPoint.x,endPoint.y);
  ctx.strokeStyle = color;
  ctx.stroke();
  ctx.closePath();
}

＆＃13;

canvas{
 border:2px dotted blue;
}

＆＃13;

您可以使用beginPath()创建新路径。并使用closePath()关闭路径。

Answer 2

我认为Canvas API中没有相关内容。

但你可以遵循下一个算法：

ctx.beginPath()
ctx.moveTo(line_1_x1, line_1_y1)
ctx.lineTo(line_1_x2, line_1_y2)
ctx.stroke()
ctx.closePath()

ctx.beginPath()
ctx.moveTo(line_2_x1, line_2_y1)
ctx.lineTo(line_2_x2, line_2_y2)
ctx.stroke()
ctx.closePath()

您可以将其包装在一个函数中：

function drawLine(ctx, x1, y1, x2, y2) {
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
    ctx.closePath()
}

完整示例（On JSFiddle）：

＆＃13;

function drawLine(ctx, x1, y1, x2, y2) {
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
    ctx.closePath()
}

let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')

drawLine(ctx, 50, 100, 100, 200)
drawLine(ctx, 100, 50, 200, 100)

＆＃13;

<canvas id='canvas' width='400' height='400'></canvas>

＆＃13;

Answer 3

绘制线后是否使用了context.moveTo（）？它从它离开的位置绘制一条线的原因是因为你的画布移动到第2行的一个点（x1，y1），如果再次使用lineTo（）而没有调用moveTo，它将从x1，y1中绘制。所以在破坏一条线之后使用moveTo（）。例如：

<form>
  <select id="request" class="dropdownbox">
    <option value="">Select</option>
    <option value="ip">approve</option>
    <option value="url">reject</option>
  </select>

  <select id="sites" class="dropdownbox">
    <option value="">Select</option>
    <option value="cp">Account</option>
    <option value="sm">Demat</option>
  </select>
  <input type="button" onclick="openWindow()" value="Submit">
</form>

ctx.beginPath();
ctx.moveTo(x1, y1);

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.moveTo(10, 50);
ctx.lineTo(150, 100);
ctx.stroke();

<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>

</body>
</html>

在画布上同时绘制两条线

3 个答案: