易坊好文馆

  1. 首页 > 玩科技 >

网络应用|前端小哥玩HTML复选框上瘾：能画logo做视频还开源成JS库( 二 )



网络应用|前端小哥玩HTML复选框上瘾：能画logo做视频还开源成JS库
文章图片


而此刻你如果打开摄像头 ， Bryan还可以带领你半只脚踏进《黑客帝国》~

网络应用|前端小哥玩HTML复选框上瘾：能画logo做视频还开源成JS库
文章图片


赶快学起来 ， 说不定还能用来画心形图 ， 成为你的表白神器（不是）！
复选框花式玩法 ， 什么原理？
看似炫酷的效果实际制作过程只需分为两大步 ， 手把手教你！
1.做出原本的图像 。
2.将图像转化为ASCII文本输出 。
以水波为例 ， 首先要生成这样动态的水波 。

网络应用|前端小哥玩HTML复选框上瘾：能画logo做视频还开源成JS库
文章图片


想要生成它 ， 需要以中心为原点 ， 在xy平面上建立正弦函数 。
z轴垂直屏幕向外 ， 把z轴的数值转化为灰度 ， 白色为波峰 ， 黑色为波谷 。

网络应用|前端小哥玩HTML复选框上瘾：能画logo做视频还开源成JS库
文章图片


然后在图形计算器desmos上让水波动起来 ， 这样第一步就完成了 。

网络应用|前端小哥玩HTML复选框上瘾：能画logo做视频还开源成JS库
文章图片


第二步 ， 将第一步的成果转化为ASCII码输出 。
这一步的转化主要涉及到将彩色对应灰度 。
采用这个公式 ， 即使是彩色的图片 ， 也只不过是五彩斑斓的灰罢了~

  • GrayScale = 0.21 R + 0.72 G + 0.07 B
提取原图的RGB色彩 ， 输出为灰度：
  • const toGrayScale = (r, g, b) => 0.21 * r + 0.72 * g + 0.07 * b;
    const convertToGrayScales = (context, width, height) => {
    const imageData = https://www.cnbeta.com/articles/tech/context.getImageData(0, 0, width, height);
    const grayScales = [];
    for (let i = 0 ; i < imageData.data.length ; i += 4) {
    const r = imageData.data[i];
    const g = imageData.data[i + 1];
    const b = imageData.data[i + 2];
    const grayScale = toGrayScale(r, g, b);
    imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = grayScale;
    grayScales.push(grayScale);
    context.putImageData(imageData, 0, 0);
    return grayScales;
然后为每个像素赋灰度值：

上一篇：手机|网友为戒网瘾买黑白墨水屏手机 玩《斗地主》分不清大小王

下一篇：硬件|传联电拟斥资1000亿新台币在新加坡建新12英寸晶圆厂