Question

我正在创建一个绘图程序，女巫也应该使用半透明刷子。当我使用透明刷子时，我最终得到了一些透明的笔触，直到我释放鼠标为止。如果我再画一个新的笔画，我的旧笔画会变得完全不透明，即使我没有碰到它们。该程序可以获取鼠标坐标，等待位置变化，然后绘制（和描边）从第一个点到第二个点的线。我已经看到一些教程建议在内存（数组）中存储所有路径并在每次鼠标释放时再次绘制它，但我不确定是否因为内存消耗。该程序是用QML + javascript编写的，但canvas的工作方式与HTML5相同。

提前感谢大家。

以下是上下文调用：

function pencilBehaviour() {
    if (canvas.isPressed){
        var ctx = canvas.getContext('2d')
        if ((canvas.bufferX != -1) || (canvas.bufferY != -1)){

            ctx.globalCompositeOperation = "source-atop"
            ctx.moveTo(canvas.bufferX, canvas.bufferY)
            ctx.lineTo(canvas.px, canvas.py)
            ctx.globalAlpha = 0.4
            ctx.lineCap = "round"
            ctx.lineJoin = "round"
            ctx.strokeStyle = "white"
            ctx.lineWidth = 3
            ctx.stroke()
            console.log("pencil invoking canvas")

            //Buffers are needed to draw a line from buffer to current position
            canvas.bufferX = canvas.px
            canvas.bufferY = canvas.py


        }
        else{
            //Buffers are needed to draw a line from buffer to current position
            canvas.bufferX = canvas.px
            canvas.bufferY = canvas.py
        }
    }
}

Answer 1

很难知道没有代码，但这是一个猜测...

确保所有新笔划都以context.beginPath（）开头，因此上下文不会“记住”您之前的笔划。

在画布中，笔画的alpha值会在另一个之后丢失

1 个答案: