在觸摸位置的HTML5畫布上繪制圓

Question

基本上，我正在嘗試使用JavaScript，因此當在頁面上按下按鈕時，它將開始偵聽畫布上的下一次觸摸。 在該觸摸上，將觸發一個函數，該函數獲取觸摸的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);
     }
}

編輯：這實際上在畫布內繪制了圓圈，而不僅僅是在0,0處，但是它們沒有在正確的位置繪制。 為什么它們不在正確的位置？

Answer 1

改用clientX / Y並使用rect邊界來補償畫布位置：

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元素，因為該元素是事件處理程序的默認上下文。