HTML5 Canvas 根据轮廓确定形状

Question

我正在尝试确定从 canvas 中的 png 图像源绘制的圆的中心 x 和 y，是否有可以执行此操作的上下文 2d 函数？或者是否有一个函数可以在 png 文件中描绘一个圆，以便我可以识别其中心 x 和 y 的坐标？

我只需要逻辑谢谢

Answer 1

没有识别 html5 canvas 上的形状的本机方法。

绘制像素后，将忘记有关如何绘制像素（圆形、矩形等）的任何信息。

一种找到你的圈子的方法

您的圈子必须与图片的其余部分区分开来。

这是一种独特的颜色吗？图像的其余部分是否透明？

在你有微分的地方，你可以使用getImageData获取canvas上每个像素的红色、蓝色、绿色和alpha信息。

var pixelData = context.getImageData(0,0,canvas.width,canvas.height).data;

这个 pixelData 是一个长数组，每个像素的颜色数据都在一个元素中：

firstPixelRed=pixelData[0];
firstPixelGreen=pixelData[1];
firstPixelBlue=pixelData[2];
firstPixelAlpah=pixelData[3];
//
secondPixelRed=pixelData[4];
secondPixelGreen=pixelData[5];
secondPixelBlue=pixelData[6];
secondPixelAlpah=pixelData[7];

您可以使用此 pixelData 来识别圆圈内的所有像素。

从这些 "inside circle" 像素中，找到它们的最小 X、最小 Y、最大 X 和最大 Y 坐标。

这些最小值和最大值将为您提供圆的边界框。

topleft    = [minumumX,minumimY]
topright   = [maximumX,minimumY]
bottomright= [maximumX,maximumY]
bottomleft = [minumumX,maximumY]

圆的半径为：

var radius = (maximumX - minimumX) /2;

所以圆心为：

var centerX = minimumX + radius;
var centerY = minimumY + radius;

你得到了圆心 [centerX,centerY] 和半径的圆！

HTML5 Canvas 根据轮廓确定形状

HTML5 Canvas determine shapes from a sillouette

html

image

canvas

shapes