Question

我试图在彩虹笔绘图画布上工作，但是每当我绘图时，线条就会显示为虚线。只有当我非常缓慢地移动时，它才能正确显示。

'mousemove'事件侦听器，不是真的能够检测到快速更改，还是我的代码中还有其他问题？另外，如果有人想要工作的程序，这里是codepen链接。

<script>
const canvas = document.querySelector('#draw');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.lineJoin = "line";
ctx.strokeStyle = 0;
let hue =0;
var [x,y]=[0,0];
let paint = false;

canvas.addEventListener('mousedown', beginDraw);
function beginDraw(e){
    paint = true;
    [x,y] = [e.x, e.y];
    // ctx.moveTo(x, y);
}

canvas.addEventListener('mousemove', draw);  
function draw(e){
    if(paint == false)
        return;
    ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 0.5)`;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(e.x, e.y);
    ctx.stroke();
    [x,y] = [e.x, e.y];
    hue++;
}

canvas.addEventListener('mouseup', endDraw);
function endDraw(){
    paint = false;
}

Answer 1

我认为问题是您的hsla函数中的颜色不透明。因为将其设置为0.5，所以您具有一定的透明度，并且由于要为图形的每个鼠标移动事件起点和终点为每个鼠标移动绘制一条线。有时这些点相互重叠。

您可以删除透明度并将其保留为1。在这种情况下，您将不再看到在两个点之间一个点绘制两个点的位置，从而使其他颜色更加可见。

ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 1)`;

如果您不希望在更改颜色时看到点，您将需要使更多的颜色值也与其他参数一起发挥作用，而不仅是色相参数，因为颜色步长可能很大，并且更改颜色时您可能会看到边缘。 / p>

Answer 2

mousemove事件处理程序每秒仅触发多次。每次执行时，您的代码都会从先前的鼠标位置到当前的鼠标位置画一条线。随后的每一行与上一行部分重叠。

对于较慢的笔划，重叠几乎为100％，因此您看不到效果，但是对于较快的笔划，重叠显示为圆圈。由于您使用的是部分透明性，因此线条重叠的点会变暗，这会导致您看到“点状”效果。

如果将不透明度设置为1，效果将消失。

画布上的画线是虚线

2 个答案: