使用 paper.js 在 canvas 顶部下方的 1/4 处绘制线段

Question

对于我正在创建的投资组合网站，我想从目标 canvas 的顶部在 Paper.js one-quarter 中画一条线，以制作一个 header各种各样的。我使用 view 功能尝试了此代码，但没有看到任何内容：

var ycoord = view.size.height * 0.25;
var xcoord = view.size.width;
console.log(pos);
var point3 = new Point(xcoord, ycoord);
var point4 = new Point(xcoord, 0);
var pathh = new Path({
  segments: [point3, point4],
  strokeColor: 'black',
  strokeWidth: '10',
});

如有任何帮助，我们将不胜感激！

Answer 1

您混淆了 x 和 y，实际上您在屏幕右侧画了一条垂直线。
这是更正后的代码：

var ycoord = view.size.height * 0.25;
var xcoord = view.size.width;
var point3 = new Point(0, ycoord);
var point4 = new Point(xcoord, ycoord);
var pathh = new Path({
    segments: [point3, point4],
    strokeColor: 'black',
    strokeWidth: '10',
});

使用 paper.js 在 canvas 顶部下方的 1/4 处绘制线段

Draw segment 1/4th below the top of a canvas using paper.js

javascript

canvas

paperjs