1

HTML5キャンバスでお絵かきアプリを作っています。メイン キャンバスにペイントするには、drawImage() を呼び出し、ブラシ イメージを含む別のキャンバスの内容をマウスの位置に貼り付けます。

ブラシ キャンバスの不透明度を設定できます。描画すると、インスタンスがスタックしてブレンドされていることがはっきりとわかります。この問題は、不透明度が 0.01 などの低い値に設定されている場合に発生します。しばらくの間、1 か所に落書きすることはできますが、ブラシの色に完全に収束することはありません。#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