Canvas 绘制风向动画

拿到一张UV风速图

其实数据是来源于NOAA 的Grid 格点风力数据，分辨率是1度，全球共360*180 个格点 （总计64,800个）. 那么就我之前的了解，风力数据一般都是分为U/V 两个方向，包括NetCDF 数据也是，坐标信息是隐含在grid 的索引中，风力记录在了 U/ V 两个垂直的方向.

把水平U 方向的风力和 垂直V 方向的风力数值分别作为 RGB波段的 R，G 两个数值，合成一张png就如图所示。

由于我没有采用官网的数据下载API，所以没有拿到原始的json 数据，只拿到一张png，所以无法反演出 U/V 数值的符号，只有正值. 所以最后渲染出来只有第一象限的风向，当然作为演示应该没问题。

根据UV 图提取出每个格点的
tmpCanvas.width = windImage.width;
    tmpCanvas.height = windImage.height;
    tmpCtx.drawImage(windImage, 0, 0);
    // imageData.data.length: width*height*4
    let imageData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height),
        dataLength = imageData.data.byteLength;
    if