javascript 通过画布在页面上实现画笔效果

ubby3x7f 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(239)

我正在研究的功能，我必须在网页上创建一个刷子一样的效果。
要求是在背景中将有多个图案/纹理可用。并且用户将拖动鼠标以在页面上创建该图案的效果。
下面是JSFiddle链接，我已经创建了结构，我能够创建模式，但我不确定如何创建画笔般的效果。
我已经在我的JSFiddle Link中添加了画笔图像作为数据源
我是一个初学者在画布上，不知道如何前进。请告诉我是否走对了方向。
检查此功能正在运行和工作的Reference Website。

JavaScript

来源：https://stackoverflow.com/questions/55201649/brush-effect-on-page-through-canvas

1条答案

按热度按时间

k97glaaz1#

对于一个基本的笔刷效果，你可以画一堆小点，而不是画一个大点，每个点代表一个笔刷笔划。你也可以添加可变宽度的中风，如果你想，但这是由你决定。这是一个基本的画笔示例，而不是画一个圆，像这样画：JS Fiddle

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let drawCheck = false;
ctx.strokeStyle = "#808080";
let points = 40;
let offsets = [];
let radius = 50;
let prev = {
  x: -1,
  y: -1
};
let curr = {
  x: -1,
  y: -1
};

for (let i = 0; i < points; i++) {
  offsets.push([Math.random() * radius * (-1) ** i, Math.random() * radius * (-1) ** i, 1 + Math.random() * 4]);
}

function draw(x, y) {
  curr.x = x;
  curr.y = y;

  if (drawCheck) {
    if (prev.x == -1) {
      offsets.forEach(offset => {
        ctx.beginPath();
        ctx.arc(curr.x + offset[0], curr.y + offset[1], 1, 0, 2 * Math.PI);
        ctx.fill();
        prev.x = curr.x;
        prev.y = curr.y;
      });
    } else {
      offsets.forEach(offset => {
      ctx.lineWidth = offset[2];
        ctx.beginPath();
        ctx.moveTo(prev.x + offset[0], prev.y + offset[1]);
        ctx.lineTo(curr.x + offset[0], curr.y + offset[1]);
        ctx.stroke();
      })
      prev.x = curr.x;
      prev.y = curr.y;
    }

  }
}

document.addEventListener("mousedown", (e) => drawCheck = true);
document.addEventListener("mousemove", (e) =>
  draw(e.clientX, e.clientY));
document.addEventListener("mouseup", (e) => {
  drawCheck = false;
  prev = {
    "x": -1,
    "y": -1
  };
});

#canvas {
  border: 2px solid black;
}

<html>
<head>
</head>
<body>
<canvas id="canvas" height=320 width=600></canvas>
</body>
</html>

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 通过画布在页面上实现画笔效果

1条答案

相关问题

热门标签

最新问答