CANVAS, um eine Zeichenpunktposition zu erhalten - HTML5 Canvas

Question

nach einem Zeichnungsstopp muss ich eine Position vom Zeichenbereich erhalten, wo die Zeichnung beendet wurde In Canvas ist es möglich, wie Zeichnungspunktkoordinaten zu erhalten?

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

können Sie halten die resultierenden Koordinaten in einer Variablen wie folgt aus:

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