通过画布在页面上的画笔效果-解网

问：

我正在研究必须在网页上创建画笔般的效果的功能。

要求是背景中将有多种图案/纹理可用。用户将拖动鼠标以在页面上创建该模式的效果。

下面是我创建结构的 JSFiddle 链接，我能够创建模式，但我不确定如何创建画笔般的效果。

我已将画笔图像添加为JSFiddle Link中的数据源

我是画布的初学者，对如何前进一无所知。如果我朝着正确的方向前进，请告诉我。

检查运行和工作此功能的参考网站。

javascript jquery html html5-canvas

好吧，为了在画布 2d 上下文中使用画笔蒙版，我会将画笔蒙版绘制到屏幕外画布上，这将累积画笔蒙版的所有绘图。对于每一帧，我都会清除可见画布，将完整的图案图像绘制到可见画布上，然后将混合模式设置为目标输入，并将屏幕外画布绘制到可见画布上，这将删除画笔未覆盖的图案图像的所有部分。您也可以像参考站点一样使用PIXI.js。

1赞 aptriangle 3/19/2019

我对您的代码进行了修改，创建随机刷毛，然后将它们绘制为圆圈。您可能希望选择刷毛位置，以便它们以您想要的方式组织，而不是随机的，但这至少显示了如何将刷毛位置数组转换为刷子： jsfiddle.net/z43udtLn

2赞 di3 3/24/2019

也许这会有所帮助：github.com/tennisonchan/fabric-brush

答：

0赞 Garvit Joshi 5/14/2023 #1

对于基本的画笔效果，您可以绘制一堆较小的点，而不是绘制单个大点，每个点代表一个画笔笔触。如果需要，您还可以为笔触添加可变宽度，但这取决于您。这是一个基本的画笔示例，不是画一个圆圈，而是像这样画：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>

上一个：我们如何在 Angular 中预加载字体？

下一个：为什么 Google Chrome 不打印表格和单元格边框以及单元格背景颜色？

通过画布在页面上的画笔效果

Brush effect on page through canvas

评论