html+css画图与动画

最新推荐文章于 2022-12-09 09:38:27 发布

缘染

最新推荐文章于 2022-12-09 09:38:27 发布

阅读量259

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_28087071/article/details/121743663

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用HTML、CSS和PHP来创建像素画。作者通过将RGB颜色值存储在文本文件中，然后用PHP解析这些值，生成一个个彩色的格子，以此形成图像。这种方法可以用来实现简单的动画效果，或者从图片中读取像素颜色来创建更复杂的画面。

摘要由CSDN通过智能技术生成

原本想弄一只有无数颜色的笔，然后一张1000*1000的方格纸，在每块上面涂上颜色，就有画了。

但是笔难以实现，所以用HTML+css弄格子，每个格子设定颜色，这就纯HTML画画了。

rgb:1,5,7;为一个像素，;，|分格或者回车也行，不断的切换图纸，就是动画了，js解析像素，布满格子即可，这就需要高手来画了，如果不行，那就弄一张图片，获取每个像素颜色，转换为rgb:,,*;这样的。。。

先用php来解析实现，把像素存到img.txt就行了

<!doctype html>
<html class="H-theme-background-color1"><head><meta charset="utf-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><title>HTML方格图片</title></head><body>

<style>td{width:1px;height:1px;}</style>
<table border="0" cellpadding="0" cellspacing="0">
<?php
//$str=file_get_contents("img.txt");
$str="99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;|
99,99,99;66,66,66;66,66,66;66,66,66;66,66,66;99,99,99;99,99,99;99,99,99;66,66,66;99,99,99;|99,99,99;99,99,99;99,99,99;99,99,99;66,66,66;99,99,99;99,99,99;99,99,99;66,66,66;99,99,99;|99,99,99;99,99,99;99,99,99;99,99,99;66,66,66;99,99,99;99,99,99;99,99,99;66,66,66;99,99,99;|99,99,99;99,99,99;99,99,99;99,99,99;66,66,66;99,99,99;99,99,99;99,99,99;66,66,66;99,99,99;|99,99,99;66,66,66;66,66,66;66,66,66;66,66,66;66,66,66;66,66,66;66,66,66;66,66,66;99,99,99;|99,99,99;66,66,66;99,99,99;99,99,99;66,66,66;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;|99,99,99;66,66,66;99,99,99;99,99,99;66,66,66;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;|99,99,99;66,66,66;99,99,99;99,99,99;66,66,66;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;|99,99,99;66,66,66;99,99,99;99,99,99;66,66,66;66,66,66;66,66,66;66,66,66;66,66,66;99,99,99;|99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;99,99,99;";
$x=explode("|",$str);
for($i=0;$i<=count($x);$i++){echo '<tr>';
$y=explode(";",$x[$i]);
for($ii=0;$ii<=count($y);$ii++){
echo '<td style="background:rgb('.$y[$ii].')"></td>';
}
echo '</tr>';
}
?>
<body></html>

缘染

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css画图与动画

原本想弄一只有无数颜色的笔，然后一张1000*1000的方格纸，在每块上面涂上颜色，就有画了。但是笔难以实现，所以用HTML+css弄格子，每个格子设定颜色，这就纯HTML画画了。rgb:1,5,7;为一个像素，;，|分格或者回车也行，不断的切换图纸，就是动画了，js解析像素，布满格子即可，这就需要高手来画了，如果不行，那就弄一张图片，获取每个像素颜色，转换为rgb:,,*;这样的。。。...
复制链接

扫一扫

专栏目录