【js】canvas获取轨迹坐标的算法

canvas获取轨迹坐标，实际上就是获取从左到右，从上到下，满足轨迹颜色的像素位置。

基础知识：

一个dot有r、g、b、a四位

getDotList(){

    this.canvas = document.getElementById(this.domId);

    this.context = this.canvas.getContext("2d");

    // 获取整个 canvas 的像素信息  

    var imgData = this.context.getImageData(0, 0,this.canvas.width, this.canvas.height);

    // 清空数组

    var dotList = [];

    // 最后实现的效果每个点之间有一定的距离，gap 就是控制这个距离的

    var gap = 1;

    // 通过 width 和 height 遍历 imgData 对象，每隔 gap 个点取一次像素，找到红色的像素，

    // 每找到一个红色点，就创建一个 Dot 对象，并添加到 dotList 数组中

    for (var x = 0; x < imgData.width; x += gap) {

        for (var y = 0; y < imgData.height; y += gap) {

            var i = (y * imgData.width + x) * 4;

            // 判断像素点是不是红色

            if (imgData.data[i] == 255 && imgData.data[i + 1] == 0 && imgData.data[i + 2] == 0 && imgData.data[i + 3] == 255) {

                var dot = {x,y} ;

                dotList.push(dot);

            }

        }

    }

    return dotList;

},