这次旅行来自寺庙
量子比特报告 |公众号 QbitAI
万万没想到，这么普通的复选框，也能打出这些高度！
例如，当您轻点复选框时，屏幕会像扔进沙子里的大海一样泛起涟漪：
设置初始状态，您可以开始显示生命游戏的演变;
控制上下左右html复选框，还可以还原经典游戏《贪吃蛇》;
这是 Bryan，一个做后端开发的人，最近在他的网站上发布的复选框的新游戏。
该项目在Hacker News上吸引了很多评论。
好评如潮，早就给孩子们安排清楚了~
而面对“为什么要用复选框，普通像素就能达到这些疗效”等一些指责，也有人为布莱恩代言：
回到事情本身，他实际上在今年早些时候构建了一个名为Checkboxland的JavaScript库。
它可以将任何内容呈现为 HTML 复选框。
还有更强大的玩法说
实话，刚才显示的复选框的功效只能说是“开胃菜”。
不仅是简单的动漫，日常照片和记录的生活视频博客也可以是“复选框”材料。哥
哥自己以为灵感一时用完了，但在看了一篇关于将图像转换为ASCII的文章后，布莱恩改造了阿迪达斯和苹果的标志（不建议转换迪士尼的标志）。
小哥本人也是个老立体，《坏苹果》也是手拉手：
后来，
自嘲的“CheckBox 家伙”为复选框提供了更多的可能性，他扩展了 Checkboxland API 来加载任何视频并生成复选框的版本。
下面的看起来像一个同步到星际的五维六面体。
而此时此刻，如果打开相机，布莱恩也可以带你半只脚踏入《黑客帝国》~
赶紧学吧，说不定可以用它画心图，成为你的告白神器（不是）！
复选框花式玩法，原理是什么？
看似耀眼功效的实际制作过程，只分为两步，教你手牵手！
1.制作原始图像。
2.将图像转换为ASCII文本输出。以水波
为例，首先要产生这种动态水波。
要生成它，您需要在以中心为原点的 xy 平面上构建一个正弦函数。
Z 轴
垂直朝外，z 轴的值转换为灰度，白色表示峰值，黑色表示波谷。
然后让水在图形计算器 Desmos 上波动，以便完成第一步。
在第二步中，第一步的结果将转换为 ASCII 代码输出。
这一步转换主要涉及将颜色与灰度匹配。
用这个公式，就算是彩色图片也只是五颜六色的灰色~
提取原始图像的RGB色调并将其输出为灰度：
然后为每个像素分配一个灰度值：
最后调整一下图片的大小就大功告成了~详见文章后面的链接~
可在线玩，快来试试吧
在最近的更新中，布莱恩表示，他对新世界的创造将暂时结束。
但除了留下了对复选框新玩法原理的详细介绍外，他还有丰富的自制演示收藏。这些足以让你探索创作。
简单的动漫，蛇，通过相机实时生成复选框图像（演示中的网络摄像头）....
点击试用，以蛇和网络摄像头为例：
单击贪吃蛇html复选框，左右键盘控制贪吃蛇：
单击网络摄像头打开前置摄像头，您可以看到您的实时动态：
根据网友的反馈，似乎在Android系统中打开会冻结，但它可以在Mac Safari，iPhone Safari，Desktop Chrome上使用。
感兴趣的伙伴，快来试试吧~
[1]
[2]
[3]
[4]#demos
[5]
这次就给大家带来Html是如何实现图片复选框的，Html实现图片复选框有哪些注意事项，下面是一个实际案例，一起来看看吧。
如果需要使用图片来实现复选框的使用，
你可以用它来实现html复选框，实现原则是替换复选框的显示，将复选框的显示设置为none，使用要在标签标签中显示的图像IMGhtml复选框，然后使用JS函数控制图片的选择与否。
function checkclick(){
var checkimg = document.getElementById("checkimg");
if($("#agree").is(':checked') ){
$("#agree").attr("checked","unchecked");
checkimg.src="../img/unchecked.png";
checkimg.alt="未选";
} else{
$("#agree").attr("checked","checked");
checkimg.src="../img/checked.png";
checkimg.alt="选中";
}
}
登录后复制
相信看完那些案例，大家已经掌握了方式，更精彩的是，请大家关注php Chinese.com 的其他相关文章！
