цель shadow() - создать линию, в которой за цветом, который выбирает пользователь, следует черная линия. Однако когда пользователь перетаскивает линию через холст, особенно справа налево, черная линия заикается над исходным цветом
Я реализовал тот же метод, который использовался для создания линии на холсте для создания задней черной линии в shadow(), изменив только свойства shadowOffset, lineJoin и lineCap, чтобы создать эффект черной линии. .
#c {
border: 1px solid black;
table{
float:left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<link href="canvas.css" rel="stylesheet">
</head>
<body>
<h2>STYLES:</h2>
<form>
<input type="button" value="shadow" onclick="shadow()">
</form>
<canvas id="c"></canvas>
</body>
<script src="canvas.js"></script>
<script src="colors.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</html>
const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default settings
ctx.strokeStyle = "black";
ctx.lineWidth = 15;
let confirmButton = document.querySelector(".confirm");
window.addEventListener('load', () => {
let painting = false;
//when mouse is clicked; paint
function mousedown(b) {
painting = true;
//allows for paint to appear without nedding to drag mouse
mousemove(b);
}
//when mouse is not clicked; don't paint
function mouseup() {
painting = false;
//resets path each time so multiple can be created
ctx.beginPath();
}
function mousemove(b) {
//Get correct mouse position
var pos = getMousePos(c, b);
//if not holding down the mouse; nothing happens
if (!painting) return;
//roundness of paint
ctx.lineCap = 'round';
//create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
ctx.lineTo(pos.x, pos.y);
//end the stroke and visualize paint
ctx.stroke();
//begins a new paint so that everything doesn't just stick to a fat line
ctx.beginPath();
//move the new line to wherever the mouse goes
ctx.moveTo(pos.x, pos.y);
}
//starting posistion of paint line
c.addEventListener('mousedown', mousedown);
//ending posistion of paint line
c.addEventListener('mouseup', mouseup);
//whenever the mouse is moving; paint
c.addEventListener('mousemove', mousemove);
confirmButton.addEventListener('click', size);
});
function size() {
numS = document.getElementById("sizeInput").value;
ctx.lineWidth = numS;
console.log("blah "+ ctx.lineWidth)
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function shadow(){
let sc = ctx.shadowColor = 'rgb(0, 0, 0)';
let painting = false;
//when mouse is clicked; paint
function mousedown(b) {
painting = true;
sc = true;
//allows for paint to appear without nedding to drag mouse
mousemove(b);
}
//when mouse is not clicked; don't paint
function mouseup() {
painting = false;
sc = false;
//resets path each time so multiple can be created
ctx.beginPath();
}
function mousemove(b) {
//Get correct mouse position
var pos = getMousePos(c, b);
//if not holding down the mouse; nothing happens
if (!painting) return;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
//create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
ctx.lineTo(pos.x, pos.y,);
//end the stroke and visualize paint
ctx.stroke();
//begins a new paint so that everything doesn't just stick to a fat line
ctx.beginPath();
//move the new line to wherever the mouse goes
ctx.moveTo(pos.x, pos.y,);
}
//starting posistion of paint line
c.addEventListener('mousedown', mousedown);
//ending posistion of paint line
c.addEventListener('mouseup', mouseup);
//whenever the mouse is moving; paint
c.addEventListener('mousemove', mousemove);
}
Что происходит, так это то, что задняя черная линия обрезает оригинальную цветную линию, создавая эффект заикания. Я показал код, относящийся только к этому вопросу, но для ясности я заново создал проект на плункере:
https://plnkr.co/edit/0gP32ZSf0ZlOVguTj51X?p=preview
file color.js не имеет отношения к этому вопросу