キャンバス描画ポイント位置を受け取る - 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(); 
} 
}