javascript - 在 HTML5 Canvas 上的触摸位置绘制一个圆圈

Question

基本上，我尝试使用 JavaScript，因此当按下页面上的按钮时，它将开始监听 Canvas 上的下一次触摸。在该触摸时，会触发一个函数，该函数获取触摸的 X 和 Y 坐标并在此处绘制一个圆圈。该圆圈也需要标记，因此添加了获取标签的提示。这是我的尝试和一些背景:

<input type="button" value="Add Symptom" onClick="touch_init();">

当按下上面的输入按钮时，会触发以下内容:

function touch_init(){
    var canvas = document.getElementById("mediCanvas");
    canvas.addEventListener("touchstart", drawSymptomCircle, false);
}

function drawSymptomCircle(event) {
    var canvas = document.getElementById("mediCanvas");

    if (canvas.getContext){
        var ctx = canvas.getContext("2d");
        var x = new Number();
        var y = new Number();
        var radius = 100;           
        var symptomName=prompt("Please enter the name of your symptom:");

        x = event.targetTouches[0].pageX;
        y = event.targetTouches[0].pageY;

        x-=canvas.offsetLeft;
        y-=canvas.offsetTop;

        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = "rgb(0,128,255)";
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = "black";
        ctx.stroke();

        ctx.font = '15pt Calibri';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText(symptomName, x, y);

        canvas.removeEventListener("touchstart", drawSymptomCircle, false);
     }
}

编辑:这实际上在 Canvas 内绘制了圆圈，而不仅仅是在 0,0 处，但它们没有绘制在正确的位置。为什么它们不在正确的位置？

Answer 1

使用 clientX/Y 代替并使用边界矩形来补偿 Canvas 位置:

function drawSymptomCircle(event) {

    var canvas = this;  // no need to get canvas element from DOM, this = canvas

    if (canvas.getContext){  // this test should be done once in global, not here :)
        ...

        var rect = this.getBoundingClientRect();  // absolute position of canvas
        x = event.targetTouches[0].clientX;       // relative to client win
        y = event.targetTouches[0].clientY;

        x -= rect.left;                           // adjusted to be relative to canvas
        y -= rect.top;

        ...

我还建议您在全局/父范围内获取 getContext() 。 this 将表示 Canvas 元素，因为该元素是事件处理程序的默认上下文。