Question

我需要你的帮助，我的问题是我们可以调整鼠标移动时画线的透明度吗？

我写了这段代码来画两条线，我添加了addEventListener来获取鼠标的坐标，但我的问题是我不知道当鼠标在线上移动时如何调整透明度。

<body>

    <canvas id="drawImage" width="900" height="900" style="background-color:black"></canvas>

    <script type="text/javascript">

        var canvas  = document.getElementById("drawImage");
        var cont = canvas.getContext("2d");
        cont.beginPath();
        cont.lineWidth=15;
        cont.strokeStyle="red";
        cont.moveTo(0,0);
        cont.lineTo(100,100);
        cont.stroke();
        cont.save();
        cont.beginPath();
        cont.strokeStyle="yellow";
        cont.moveTo(100,100);
        cont.lineTo(100,150);
        cont.stroke();
        cont.save();

        canvas.addEventListener("mousemove", function(event {});


    </script>
</body>

感谢每个人。

Answer 1

您可以使用.globalAlpha

创建一个改变每个笔划透明度的函数

演示：http://jsfiddle.net/m1erickson/dQFvm/

enter image description here

示例功能：

function drawAlphaLine(x0,y0,x1,y1,strokeColor,alpha){        
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        ctx.lineTo(x1,y1);
        ctx.globalAlpha=alpha;
        ctx.strokeStyle=strokeColor;
        ctx.stroke();
        ctx.restore();
}

当鼠标移动时，我们可以调整绘制线条的透明度吗？

1 个答案: