Хай, не було чим зайнятись, та й надумав зробити можливість малювати так, аби кінці ліній утоншувались.
Ідея проста:
1. Коли кляцаємо на полотно вперше, то запам'ятовуємо його вміст
2. Коли рухаємо мишку (малюємо), то записуємо координати в масив, і малюємо лінію з однорідною товщиною
3. Коли закінчуємо малювати, то копіюємо на полотно те, що запам'ятали в пункті 1, після чого перемальовуємо лінію, координати котрої заносили в масив, але тепер модифікуємо товщину.
Як модифікувати товщину - то вже як хочете, так і робіть. Я спершу спробував лінійно змінювати товщину від максимально можливої до 0, але потім використав косинус, аби товщина починала зменшуватись ближче до кінця.
Осьо код
▼html
<canvas id="myCanvas" width="200" height="200"></canvas>
<button id="clear">Clear</button>
▼css
body {
background: gray;
margin: 0;
}
canvas {
border: 1px solid black;
}
▼js
const canvas = document.getElementById('myCanvas');
const clear = document.getElementById('clear');
const ctx = canvas.getContext('2d');
let lastCanvas;
clear.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
let down = false;
let lastPoints = [];
ctx.lineCap = 'round';
canvas.addEventListener('mousedown', ({offsetX: x, offsetY: y}) => {
lastPoints.push({x, y});
ctx.lineWidth = 5;
lastCanvas = ctx.getImageData(0, 0, canvas.width, canvas.height);
down = true;
ctx.beginPath();
ctx.moveTo(x, y);
});
canvas.addEventListener('mouseup', (event) => {
ctx.putImageData(lastCanvas, 0, 0);
redraw();
lastPoints = [];
down = false;
});
canvas.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
if (!down) return;
lastPoints.push({x, y});
ctx.lineTo(x, y);
ctx.stroke();
});
function redraw() {
if (lastPoints.length === 0) return;
const length = lastPoints.length;
const {x, y} = lastPoints[0];
ctx.beginPath();
ctx.moveTo(x, y);
for (let i = 0; i < length; i++) {
const {x, y} = lastPoints[i];
ctx.lineWidth = easyOut(1-(i / length )) * 5;
console.log(`x`, i / length, `easyOut`, easyOut((i / length )));
ctx.lineTo(x, y);
ctx.stroke();
}
}
function easyOut(x) {
return -Math.cos(x*Math.PI*0.5+Math.PI*0.5);
}
https://jsfiddle.net/pts6e990/1/
Тепер хочу зробити, аби товщина кінців залежала від швидкості малювання. Якщо малюємо повільно, то товщина максимальна, а якщо швидко, то кінець тоншає.
