캔버스 드로잉 포인트 위치를 수신 - HTML5 캔버스

Question

드로잉 중지 후

드로잉이 끝난 캔버스에서 위치를 받아야합니다 캔버스에서 드로잉 포인트 좌표를 수신 할 수 있습니까?

circle

 Number.prototype.toRad = function() { return this * Math.PI/180; } 
 
    var num = 0; 
 
    var qwerty = function(){ 
 
    setTimeout(function(){ 
 
     num++; 
 
     drawOnCanvas7(num); 
 
     if(num<=70){ 
 
     qwerty(); 
 
     } 
 
     }, 100); 
 
    } 
 
    qwerty(); 
 
    function drawOnCanvas7(v){ 
 
\t v = parseInt(v); 
 
\t v = v>100?100:v<=0?0:v; 
 
    var onePrc = 360/100; 
 
    v = v * onePrc; 
 
    \t var canvas2 = document.getElementById('tutorial-7'); 
 
    canvas2.width = 210; 
 
    \t canvas2.height = 210; 
 
    var ctx = canvas2.getContext("2d"); 
 
    if(ctx){ 
 
    ctx.lineWidth = 5; 
 
    ctx.strokeStyle = "black"; 
 
    ctx.save(); 
 
    ctx.strokeStyle = "yellow"; 
 
    ctx.beginPath(); 
 
    \t ctx.arc(105, 105, 100, (0).toRad(), (v).toRad()); 
 
    ctx.stroke(); 
 
    } 
 
}

canvas { 
 
    
 
    display:block; 
 
}

<canvas id="tutorial-7" width="100" height="100" style="transform:rotate(-90deg)"> 
 
Ваш браузер не поддерживает CANVAS 
 
</canvas>

Answer 1

해당 같은 변수에 생성 된 좌표를 유지할 수

원에 지점이 죄를 가산함으로써 산출 될 수

function drawOnCanvas7(v){ 
v = parseInt(v); 
v = v>100?100:v<=0?0:v; 
var onePrc = 360/100; 
v = v * onePrc; 
var canvas2 = document.getElementById('tutorial-7'); 
canvas2.width = 210; 
canvas2.height = 210; 
var ctx = canvas2.getContext("2d"); 
var x_end = 105 + Math.cos((v).toRad()) * 100; 
var y_end = 105 + Math.sin((0).toRad()) * 100; 
if(ctx){ 
ctx.lineWidth = 5; 
ctx.strokeStyle = "black"; 
ctx.save(); 
ctx.strokeStyle = "yellow"; 
ctx.beginPath(); 
ctx.arc(105, 105, 100, (0).toRad(), (v).toRad()); 
ctx.stroke(); 
} 
}