HTML 5 Canvas - 获取路径的像素数据

时间:2012-09-01 21:35:05

标签: javascript html5 canvas

我想知道是否有任何方法可以获取canvas标签中当前绘制路径的像素数据。

我可以在绘制简单形状(如方形或直线)时自行计算像素数据,但是更复杂的形状(如椭圆或甚至是简单的圆形)会让事情变得混乱。

我问这个的原因是因为我正在开发一个Web应用程序,它涉及在向画布添加路径时将画布像素数据发送到服务器。服务器需要保留它自己的整个画布的副本,我真的不希望每次更改都发送ENTIRE画布图像,但出于效率原因只发送delta ...

感谢。

1 个答案:

答案 0 :(得分:2)

步骤1:将路径绘制到与原始尺寸相同的第二个画布,让我们将其称为“路径画布”。

步骤2:将路径画布的globalCompositeOperation设置为'destination-in'。

第3步:将原始画布绘制到路径画布上

步骤4:遍历路径画布的所有像素,并以您将其发送到服务器的任何格式存储不透明的像素。