>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);
}
发生的情况是尾随的黑线穿过原始颜色线，产生卡顿效果。我只展示了与这个问题相关的代码，但为了清楚起见，我在 plunker 上重新创建了该项目：https://plnkr.co/edit/0gP32ZSf0ZlOVguTj51X?p=preview
文件color.js与此问题无关
你的canvas.js有一堆乱七八糟的功能，我不知道你在那里做什么......
这是一个带有阴影按钮的简单画布
const c = document.querySelector("#c");
const ctx = c.getContext("2d");
ctx.strokeStyle = "red";
ctx.lineWidth = 6;
window.addEventListener('load', () => {
function mousemove(b) {
var pos = getMousePos(c, b);
ctx.lineTo(pos.x, pos.y);
ctx.clearRect(0,0,c.width,c.height);
ctx.stroke();
}
c.addEventListener('mousemove', mousemove);
});
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function shadow() {
ctx.shadowBlur = 2;
ctx.shadowOffsetX = 6
ctx.shadowColor = 'black';
}<canvas id="c"></canvas><br>
<input type="button" value="shadow" onclick="shadow()">