如何在javascript画布中绘制并将其与形状进行比较？

Question

所以为了保持简短，我想知道如何跟踪用户从他们点击的那一刻到他们放手的时候比较它以确定它的准确性，比如说，一个完美的圆圈？

这是否可能，如果是这样，与完美的圆形相比，检查其准确性的最佳方法是什么？

还要考虑这个问题，如果用户画了一个圆圈，但是起点和终点并不完全相符，可以画一条线来连接它们等等吗？

Answer 1

我做了这个＆＃34;留在文本中＃34;游戏前一阵子。你要做的就是追踪数字。在追踪时你留在线内的次数越多，你的得分就越高。

欢迎您从此开始并根据需要进行修改。 ： - ）

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();


ctx.font="216px arial";
ctx.fillStyle="white";
ctx.fillText("2",100,200);
ctx.strokeText("2",100,200);

var cw=canvas.width;
var ch=canvas.height;
var imgData=ctx.getImageData(0,0,cw,ch);
var data=imgData.data;

var isDown=false;
var wasInside=true;
var score=0;

function draw(mouseX,mouseY){

  var alpha = data[((cw*mouseY)+mouseX)*4+3];

  score+=(alpha>19?1:-1);

  if(alpha<20 && wasInside){
    wasInside=false;
    ctx.fillStyle="white";
    ctx.fillRect(0,0,cw,ch);
    ctx.fillStyle="white";
    ctx.fillText("2",100,200);
    ctx.strokeText("2",100,200);
  }else if(alpha>19 && !wasInside){
    wasInside=true;
    ctx.fillStyle="white";
    ctx.fillRect(0,0,cw,ch);
    ctx.fillStyle="green";
    ctx.fillText("2",100,200);
    ctx.strokeText("2",100,200);
  }

}

function handleMouseDown(e){
  e.preventDefault();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  var alpha = data[((cw*mouseY)+mouseX)*4+3];
  wasInside=(alpha<20);
  score=0;
  isDown=true;
  draw(mouseX,mouseY);
}

function handleMouseUp(e){
  e.preventDefault();
  isDown=false;
  $("#score").text("Score: "+score);
}

function handleMouseOut(e){
  e.preventDefault();
  isDown=false;
}

function handleMouseMove(e){
  if(!isDown){return;}
  e.preventDefault();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  draw(mouseX,mouseY);
}

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});

$(window).scroll(function(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;
});

＆＃13;

body{ background-color: white; }
#canvas{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag inside the number<br>Number stays green while you're inside.</h4>
<h3 id="score">Score:</h3>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里我将如何比较一个数字：我会让globalComposite操作＆＃39; xor＆＃39;模式做“减法”＆＃39;然后，使用getImageData计算非空像素以估计错误。

步骤：
•让用户绘制并存储点坐标 •图形完成后，计算图形边界框（基本上为x / y的最小值/最大值） •在具有bbox大小的临时画布上再次绘制图形（作为填充多边形） •将globalComposite设置为＆＃39; xor＆＃39;，并在此画布上绘制完美的图形。
•抓取画布的imageData并计算非空像素 •计算得分＆＃39;超出非空像素计数与画布大小。我认为不到5％的错误是完美的，不到25％是非常好的......只有尝试才能说明。