1

我正在使用 HTML5 画布制作绘图应用程序。要在主画布上绘画，我调用 drawImage() 并将包含画笔图像的单独画布的内容粘贴到鼠标位置。

我可以设置画笔画布的不透明度，当您绘制时，您可以清楚地看到实例堆叠并混合在一起，就像它们应该的那样。当不透明度设置为较低的值（例如 0.01）时，就会出现问题。你可以在一个地方涂鸦一段时间，但它永远不会完全收敛到画笔颜色。笔刷颜色为#000000 时，它将在#2a2a2a 处停止堆叠。

对此我能做些什么吗？这是一个示例应用程序。

<head>
    <style type="text/css">
        #canvas1 {
            border: 1px solid #000;
        }

        #canvas2 {
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <canvas id="canvas1" width="300" height="300">
    </canvas>

    <canvas id="canvas2" width="20" height="20">
    </canvas>

    <script type="text/javascript">

        var elem1 = document.getElementById("canvas1");
        var elem2 = document.getElementById("canvas2");
        var context1 = elem1.getContext("2d");
        var context2 = elem2.getContext("2d");

        var drawing = false;

        init();

        function init() {
            //draw brush
            var alpha = 0.01;    //opacity of the brush
            context2.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
            context2.beginPath();
            context2.arc(10, 10, 10, 0, Math.PI*2, true); 
            context2.closePath();
            context2.fill();

            elem1.addEventListener("mousedown", function(){startdraw()});
            elem1.addEventListener("mouseup", function(){enddraw()});
            elem1.onmousemove = draw;
        }

        function startdraw() {
            drawing = true;
        }

        function enddraw() {
            drawing = false;
        }

        function draw(ev) {
            if(drawing) {
                context1.drawImage(elem2, ev.pageX - this.offsetLeft - 10, ev.pageY - this.offsetTop - 10);
            }
        }

    </script>
</body>
4

0 回答 0