Question

我正在尝试创建一个Web应用程序，让用户在html画布上插入小字符图像。计划是让用户单击虚拟键盘上的按钮，然后单击画布以在用户单击的任何位置显示相应的字符。现在我只是想在点击时让一个图像出现在画布上，但到目前为止它没有做任何事情。这是我现在拥有的代码，它嵌入在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事件，它会返回coords，但图像不会出现。这里出了什么问题？

Answer 1

这应该有效，因为click事件将在画布本身上触发：

        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);
        };

将图像放在画布上与鼠标点击相同的x，y位置

1 个答案: