前端
关注
分享
扫一扫
文章平均质量分 90
CrazyDragon_King
纸上得来终觉浅，绝知此事要躬行。
展开
-
正多边形的数学推导及绘制
正多边形是一种很有意思的图形，但是如果想要绘制一个正多边形并不是那么容易的。最近看书介绍了这一块的内容，但是它只是很简单的描述了一下，并没有详细的过程。所以自己推导了一下，在这里记录一下。这种推导方式是通用的，在其它任何的绘图库中都是可以使用的。在这里我使用canvas来实现绘制。推导所使用的坐标系及绘制示意图绘制正多边形的关键点在于需要计算出多边形顶点的位置，这里需要利用到一些三角函数的简单知识。我这里以正六边形为例子进行举例。正多边形的顶点都在其外接圆上，所以我们需要的初始条件是外接圆的圆心坐标原创 2022-05-20 17:51:24 · 3380 阅读 · 0 评论 -
可视化迷宫寻路
可视化迷宫寻路前言： 以前学习数据结构的时候，曾经写过一个C语言版本的迷宫寻路程序。当时很有成就感，不过后来源代码丢失了，只剩下一个当初拍摄的视频了。一直想找机会给它复刻一下，正好最近接触了canvas，所以就想着用canvas的动画来重新实现一下。注：当初实现的是命令行版本的，借助了清屏函数来实现的绘制功能。效果演示先看一下视频演示，再来阅读文章，效果会更好。 迷宫寻路 代码原创 2022-02-27 17:07:23 · 1525 阅读 · 0 评论 -
基于Canvas的N宫格拼图
最近使用Canvas实现了一个N宫格拼图的游戏，感觉效果还是很不错的，不过我还是觉得九宫格就好了，太多了反而就复杂了。这里我就主要讲述九宫格的实现过程，其它的只是把数据结构扩大一下了。实现效果图片效果视频效果 九宫格美女拼图 N宫格实现大体设计思路鼠标移动时依次绘制网格矩形，同时判断鼠标落点所在网格起始位置；当鼠标离开或者移出时，依据鼠标落点最后所在的网格的起点绘制矩形；不能原创 2021-10-24 15:13:40 · 830 阅读 · 0 评论 -
Canvas实现碧蓝航线语音效果（粗制滥造）
因为在网络上浏览信息时，总会看到一些网页（博客园居多）会带有一个小女孩的样式，鼠标移入不同位置会显示不同的文字，这个东西很有趣。经过查阅，发现这种技术叫做live2D，它在某些类型的游戏中使用很多。提起游戏我又想起来，有一款叫做碧蓝航线的游戏，它的人物可以通过触摸来出发音效，不过我没有玩过，只是在视频里面见过。因为我最近做了几个关于canvas的玩具，所以我准备来试试使用canvas来复刻一下碧蓝航线里面的那种效果。不过，这里需要先指出，我的标题已经明确了，这是一个粗制滥造的复刻，哈哈，具体效果，仁者见仁智原创 2021-10-07 15:50:47 · 648 阅读 · 0 评论 -
Canvas图形拖动效果实现改进版
前言： 上次实现的完整版，老实说有一些不满意的地方。这是当时思考欠缺的地方，所以在实现时进行了一些妥协，在不影响整体功能的情况下进行了实现。今天下班回家的路上，在班车上忽然想起最近的伤心事，不免有些失落，还是觉得应该找点事情做。想起我的这个东西还不够完善，当时想了一个方法，我觉得可行，然后到了住处点了一个外卖就开始进行实现了。最初的想法只是部分可用，当时实现的效果在逻辑上还是不对，不过它也让我对这个东西的逻辑更加了解了，方法再改进即可，最终完成了这个实现。我觉得很多东西就是这样，最初的想法可能不对，当时只要原创 2021-09-25 15:14:02 · 857 阅读 · 0 评论 -
Canvas拖动图形实现效果完整版
Canvas拖动图形实现效果完整版上次那个实现只能支持单张图片，并且代码的逻辑不够清晰。所以中秋节，正好一个人也没事做，专门抽出时间来对它进行一个扩展，添加对多张图片的支持。效果展示下面我们先来看看实现的效果，这里先提一点：当你移动图片时，注意它是在所有图片的最下层，这是我的技术实现的特点。1.GIF动图2.B站视频 canvas图片拖动 实现分析多张图片移动实现分析所有原创 2021-09-22 21:29:02 · 2478 阅读 · 2 评论 -
Canvas拖动图形效果实现
前言： 最近对于canvas产生了一些兴趣，我天生是对这种视觉的东西感到好奇的，因此投入了一些时间来玩一玩，仿照网上的一个案例实现了一个基于canvas的图形拖动效果。我主要是借鉴了他们的思想，代码部分是自己独立实现的，也因此走了一些canvas的坑。Canvas图形拖动效果展示主要实现的功能是：鼠标点击会出现红色选中框，鼠标松开选中框消失；鼠标移动，图片也会跟随移动；图片只能在有限空间内移动，无法移动出边界。实现逻辑鼠标拖动逻辑一点个人理解：鼠标事件或者其它浏览器事件都是独立的，但是原创 2021-09-20 00:16:46 · 6701 阅读 · 9 评论 -
多人协作共享画板——多人画板的bug解决
上一篇博客，我们分析了多人画板bug的产生原因，并且探索了一个解决的方法。现在让我们来实现它吧！实现思路代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .rg{原创 2021-08-24 00:23:21 · 542 阅读 · 0 评论 -
多人协作共享画板——多人画板的bug及分析
上一篇博客我们已经介绍了一个多人画板的实现过程，并且在最后添加了一个演示的GIF图片，证明它是可以正常工作的。我也是这样认为了，直到多个人一起测试的时候，出现了严重的bug。下面让我带领你去探索这个问题吧。多人画板的bug及分析多人画板的bug复现由于前期我都是一个人写一个人进行测试，完全觉得没有问题，不是我喜欢一个人测试，是因为我就一个人——形单影只（唉，这是一件伤心事！）。所以我在这个画板上绘制，然后跑到另一个画板上进行绘制，从来没有出现过问题，我就认为这是正常的了。可是后来才发现，当多个人同时绘原创 2021-08-24 00:22:15 · 942 阅读 · 0 评论 -
多人共享协作画板——多人画板
前面我们介绍了一个简单的单机画板的实现，现在我们将它向多人画板进行扩展，一个很自然的想法便是将绘制过程封装成指令，然后通过网络发送出去，接收到指定的客户端，需要依照绘图指令，同步进行绘制操作。那么首先需要解决的问题是，如何发送？发送什么？多人画板技术探究如何发送？这里需要解决的是所有人可以同步进行绘制，那么就需要连续不断的的接收和发送数据，所以网络协议我们选择WebSocket，我也见过使用WebRTC协议来实现的，不过这个东西我只是耳闻，从来没有使用过。选择协议的目的是为了全双工的工作，应该HTTP原创 2021-08-24 00:21:17 · 3836 阅读 · 3 评论 -
多人共享协作画板——单机画板
最近由于工作需要，接触到了多人共享协作画板这个东西。在这个过程中，学习到了不少前端的知识，现在正好抽时间来对这一段时间学习的知识做一个总结。我都计划是分几篇博客，对共享画板这一块我理解的知识做一个总结，主要是学习中的一些思考，以及对一些问题的解决，希望可以帮助到有需要的人。单机画板多人共享协作画板也是从单机画板演化出来的，所以我们这里先介绍如何实现一个简单的单机画板。了解一个单机画板的实现，会有助于理解后面将要做的多人协作画板。这里实现的过程主要是使用到了HTML的canvas标签，这个标签很有趣，功能原创 2021-08-24 00:20:43 · 2037 阅读 · 0 评论 -
多人协作共享画板——多人画板的收尾工作
通过前面的几篇博客，基本上已经可以实现数据在网络上的传递和正确的还原了。但是现在还留有一些细节上的问题亟待解决，所以在最后一篇博客，我们来进行一些收尾的工作！目前待解决的问题？多人可以同时进行绘制，但是线条的样式变得离散了，不再连续，很难看。多人同时进行绘制时，线条的颜色和粗细会进行干扰。我们先来解决第一个问题吧，因为它比较简单。线条离散问题改进方式：在绘制前，设置context的lineCap和lineJoin样式为“round“即可，即：context.lineJoin = "rou原创 2021-08-24 00:19:44 · 707 阅读 · 2 评论