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

Question

因此，为了简短起见，我想知道如何才能从用户单击到松开时跟踪用户绘图，并比较它，例如用一个完美的圆来检查它的准确性。

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

还可以考虑这样的情况：如果用户画了一个圆，但是起点和终点没有完全相遇，也许画了一条线来连接它们，等等？

Answer 1

不久前，我做了这个“留在文字里”的游戏。 您要做的就是追踪号码。 跟踪时您在行内停留的次数越多，您的得分就越高。

欢迎您从此开始并根据需要对其进行修改。 :-)

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

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

 <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> 

Answer 2

这是我比较数字的方法：我将让globalComposite操作“异或”模式对右图进行“减”，然后使用getImageData计数非空像素以估计误差。

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