耗时半个多月写出多人在线像素画板(类r/place)

           

发布于 2022-04-07  200 人经过了这里


前段时间学完AJAX心血来潮,想再写个大项目,于是想还原出简单的r/place或者B站夏日绘板
于是开始写(x没想到没写几天,r/place就开始第二季了,真是太巧了x

这次是先写的后端,同样使用PHP,关于PHP的实现可以参考这一篇文章
后端用了几天时间很快就写完了接口,下面就是前端的AJAX实现

具体的本质原理可以参考上一篇文章,这里实现起来不是问题,这次主要探讨的是:
PHP接口返回值后使用JS处理,并用HTML的<canvas>标签绘制画板

HTML的canvas实现只需要这样:

<canvas id='board' width='800' height='800' style='border:1px solid #000000;'>

因为对于canvas的绘制必须使用JS,于是用JS可以轻松的写出绘制:

var c = document.getElementById('board');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,c.width,c.height);
for...for...
ctx.fillStyle = ...;
ctx.fillRect(...,...,...,...);

可以看出使用canvas可以轻松的绘制出我们想要的图形,之前还想用div来画来着(x

对于像素点坐标及颜色的存储也是存在数据库中,与前几篇文章原理一致
不过需要注意的一点是PHP返回的内容,如果返回的是PHP数组,JS是不认识的!
所以需要输出适配JS的JSON格式的内容哦

还有很多需要注意的小细节懒得写了:redis限制接口访问,防止修改X_forward_for头等等

对于其他功能,通过简单的搜索学习也能很快的写出来,于是成品如图(22040709)

链接入口:http://qwq.re/online-draw
需要先同意使用协议才能使用哦w