1

ユーザーがHTMLキャンバスに文字の小さな画像を挿入できるWebアプリを作成しようとしています。計画では、ユーザーが仮想キーボードのボタンをクリックしてから、キャンバスをクリックして、ユーザーがクリックした場所に対応する文字が表示されるようにします。今のところ、クリックしたときに1つの画像をキャンバスに表示しようとしていますが、これまでのところ何もしていません。これが私が今持っているコードで、htmlファイルに埋め込まれています。

<script type="text/javascript">
            var mathCanvas = document.getElementById("matharea");
            var ctx = mathCanvas.getContext("2d");
            var el = mathCanvas;
            var xPos = 0;
            var yPos = 0;
            while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)){
                xPos += el.offsetLeft - el.scrollLeft;
                yPos += el.offsetTop - el.scrollTop;
                el = el.parentNode;
            }
            var img = new Image();
            img.src = "five.png";
            mathCanvas.onclick = function(event){
                var x = event.clientX - xPos;
                var y = event.clientY - yPos;
                ctx.drawImage(img,x,y);
            };
</script>

onclickイベントをテストしましたが、座標が返されますが、画像が表示されません。ここで何が問題になっていますか？

4

1 に答える 1

3

クリックイベントがキャンバス自体で発生するため、これは機能するはずです。

        var mathCanvas = document.getElementById("matharea");
        var ctx = mathCanvas.getContext("2d");

        var img = new Image();
        img.src = "five.png";
        mathCanvas.onclick = function(event){
            var x = event.offsetX;
            var y = event.offsetY;
            ctx.drawImage(img,x,y);
        };

ポイントに画像を中央に配置するには：

        var mathCanvas = document.getElementById("matharea");
        var ctx = mathCanvas.getContext("2d");

        var img = new Image();
        img.src = "five.png";
        mathCanvas.onclick = function(event){
            var x = Math.round(event.offsetX - img.width/2);
            var y = Math.round(event.offsetY - img.height/2);
            ctx.drawImage(img,x,y);
        };
于 2012-11-05T21:26:58.050 に答える