前段时间学完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