点击图片的rgba信息并将body background显示为该色

load 外部图权限需要提升

    4.碰撞

    碰撞的算法比较简单,但是如何能提高碰撞检测的效率是关键之处.

    这里用的方法是通过基于绘制文本的x,y为基础点去做判断.复杂度为循环要绘制文本的像素点:

    O(((y - 1) * (width * 4)) + ((x - 1) * 4));

    近似等于O( (Math.max(width, height)^2) ).

/**

    * collusion 检测碰撞

    * @param {CanvasPixelArray} imageData 画布的imageData

    * @param {CanvasPixelArray} wordImageData 文字的imageData

    * @param {Number} x 绘制文字在画布的x坐标

    * @param {Number} y 绘制文字在画布的y坐标

    * @return {Boolean} 返回是否碰撞

    */

    function collision(imageData, wordImageData, x, y) {

    var wdata, fdata, wy, widx, widxend, fidx, wv, fv;

    wdata = wordImageData.data;

    fdata = imageData.data;

    for (wy = wordImageData.height - 1; wy >= 0; --wy) {

    //逐行扫描

     widx = wy * wordimg.width * 4;//当前行rgba起始值

     widxend = widx + (wordimg.width * 4);//当前行末rgba结束值

    fidx = ((y + wy) * imageData.width + x) * 4;//大画布中当前行的像素起始值

    for (; widx < widxend; widx += 4, fidx += 4) {//根据wordimg+y坐标定位到行,开始逐列扫描,并进行比较

    //因为rgba的rgb任意像素都可能为空,所以只用判断opacity

    wv = wdata[widx + 3];

    fv = fdata[fidx + 3];

    //需要放置的文字在某个坐标透明度不为零

    //及在已存在画布上坐标上透明度也不为零,即为碰撞

    if (wv && fv) return true;

    }

    }

    return false;

    }

    一些资料

    CanvasPixelArray参考MDC

    https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

    wordle.net的作者写的一些资料:

    信息可视化wiki:

    stackoverflow上的一些信息:

觉得文章有用？立即： 和朋友一起 共学习 共进步！

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习