Canvas是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。J…

总所周知canvas绘制的图形没有交互功能，这篇文章是我这两天基于canvas绘制地铁图总结出来了。

注：下面实现项目效果主要是关于JavaScript方面的，下面仅仅是提供实现思路的代码，并非全部代码。 css代码可以根据个人习惯进行美化界面，所以这里就不写css的代码了，大家可以直接看项目代码或者从开发者工具中审查元素观看。如果有问题可以私聊我，我觉得问题不大。 首先，准备…

本文适合有一定canvas基础的朋友。 1. 项目介绍 真心感觉界面设计的好看，我就借鉴过来了，哈哈哈。但是我的dom架构设计和上面文章里的不一样。 3. 项目开发流程与变量说明 1. 保存历史记录使用api对比 2. 画直线 3. 图片旋转 4. 如何画出一条光滑的曲线 5.…

本文在 canvas实现画板功能的基础上进行了一些完善。 可以通过Canvas_API了解canvas。 代码直接使用了ES6的语法，在谷歌浏览器（版本 76.0.3809.100）上能实现预期的效果。 在HTML中添加上操作按钮以及canvas元素。 创建了一个名为Draw的…

随着APP的获客成本越来越高，很多产品开始从wap页引流，而最常见的方式便是分享，尤其是在微信中。因此诞生了一些新玩法，比如生成一张海报图片，用户可以保存或分享到其他平台。 本文将介绍如何生成一张海报图片，以及可能会碰到的问题和解决方案。 目前移动端浏览器对于canvas的支持…

今天学一下canvas像素点操作。 下面的栗子简单实现了几个简单的滤镜效果，具体算法参考的这里，学过《数字图像处理》的同学应该对此理解更深刻。 然后被朋友圈吐槽抠图。其实当时就是站在一块绿幕前拍的😂 。 PS中魔法棒工具可以把图片中一定容差下的相近像素都选中、清空，轻松做到一…

现代浏览器支持通过<video>元素播放视频。大多数浏览器也可以通过MediaDevices.getUserMedia() API访问摄像头。但即使这两件事结合起来，我们也无法直接访问和操纵这些像素。 幸运的是，浏览器有一个Canvas API，允许我们使用JavaScript…

什么是图片标注？众所周知，机器学习是需要数据支撑的，比如你想让机器认识图片中的猫，就得把很多已经有答案的图给这个机器看，就像我们看例题一样。而图片标注就是给图片这个例题加上答案。比如我们要框出图片中猫，最后把坐标以及原图打包作为一个学习样本，就可以给模型食用啦。 这款控件就完成…