JS Canvas: Как нарисовать линии разной твердости? ⇐ Javascript

[Anonymous]

Я хочу создать кисть с вариантом твердости, как в Photoshop. < /p>
Я попытался использовать ctx.createradialgradient для создания радиального прозрачного круга, но результат не был удовлетворительным.

Код: Выделить всё

function createBrush(size, hardness) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

[canvas.width, canvas.height] = [size, size];

const outerRadius = size / 2;
const innerRadius = outerRadius * (1 - hardness); // how to apply the hardness option?
const x = size / 2;
const y = size / 2;
const gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");

ctx.fillStyle = gradient;
ctx.clearRect(0, 0, size, size);
ctx.beginPath();
ctx.arc(x, y, outerRadius, 0, 2 * Math.PI);
ctx.fill();

return canvas;
}

bursh с твердостью
чертеж
Мой вопрос заключается в том, как создать эффект твердости, похожий на кисть в Photoshop? /> Мой пример: < /p>

Код: Выделить всё

function createBrush(size, hardness) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

[canvas.width, canvas.height] = [size, size];

const outerRadius = size / 2;
const innerRadius = outerRadius * (1 - hardness); // how to apply the hardness option?
const x = size / 2;
const y = size / 2;
const gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");

ctx.fillStyle = gradient;
ctx.clearRect(0, 0, size, size);
ctx.beginPath();
ctx.arc(x, y, outerRadius, 0, 2 * Math.PI);
ctx.fill();

return canvas;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let brush, isDrawing, lastPoint;

function drawBrush(x, y) {
ctx.drawImage(brush, x - brush.width / 2, y - brush.height / 2);
}

canvas.onmousedown = function (e) {
brush = createBrush(50, 1);
isDrawing = true;
lastPoint = { x: e.offsetX, y: e.offsetY };
drawBrush(lastPoint.x, lastPoint.y);
};

canvas.onmousemove = function (e) {
if (!isDrawing) return;

const currentPoint = { x: e.offsetX, y: e.offsetY };
const dist = distanceBetween(lastPoint, currentPoint);
const angle = angleBetween(lastPoint, currentPoint);

for (let i = 0; i < dist; i++) {
const x = lastPoint.x + Math.sin(angle) * i;
const y = lastPoint.y + Math.cos(angle) * i;
drawBrush(x, y);
}

lastPoint = currentPoint;
};

canvas.onmouseup = function () {
isDrawing = false;
};

function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}< /code>
canvas {
border: #000 solid 1px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/796 ... t-hardness