Я пытаюсь сделать так, чтобы это была только 1 кривая линия, но по какой-то причине она создает ее за зубчатой, которую я не хочу.
Я пытался добавлять и удалять, и по какой-то причинелиния все еще рисует, когда я удалил "beginPath ()."Но с bezierCurveTo он остается неровным, но снова образует плавную линию, когда я снова добавляю "beginPath ()".
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = 'hue(100%, 75%, 50%)';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 5;
ctx.globalCompositeOperation = 'multiply';
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let points = [];
function draw(e) {
if (!isDrawing) return;
var px2 = points.map(point => point.x)[2];
var py2 = points.map(point => point.y)[2];
var px1 = points.map(point => point.x)[1];
var py1 = points.map(point => point.y)[1];
var px0 = points.map(point => point.x)[0];
var py0 = points.map(point => point.y)[0];
ctx.stroke();
ctx.beginPath();
ctx.moveTo(px2, py2);
if (points.length > 3) {
ctx.bezierCurveTo(px1, py1, px0, py0, e.offsetX, e.offsetY);
}
var slope = ((lastY - e.offsetY) + 1) / (Math.abs(lastX - e.offsetX) + 1);
if (slope < -0.5) {
if (ctx.lineWidth < 15) {
ctx.lineWidth++;
}
} else {
if (ctx.lineWidth > 3) {
ctx.lineWidth -= 1;
}
}
[lastX, lastY] = [e.offsetX, e.offsetY];
points.unshift({
x: lastX,
y: lastY,
size: ctx.lineWidth,
color: ctx.strokeStyle,
mode: "draw"
});
}
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
ctx.lineWidth = 5;
points = [];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
<canvas id="draw"></canvas>
Я ожидаю, что конечный результат будет иметь только 1 изогнутую линию и удалит зазубренную, наслоенную сверху.
Вы такжеУвидеть 2 слоя можно очень быстро, только если вы нарисуете кривую очень быстро.
Любая помощь приветствуется.