接收绘制点位置的画布- HTML5画布

Question

在绘图停止后，我需要从canvas接收一个位置，在canvas中绘图已经结束，是否可以接收绘制点坐标？

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

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