需求 产品：我们需要一个类似于浏览器的滚动条，用户可以拖拽快速定位，你来实现一个。 我：原生又不支持，做不到 产品：我不要你觉得，我要我觉得，快做 我：(╯‵□′)╯︵┻━┻ 演示效果 写...

鼠标交互事件 前几篇关注的是如何渲染，那么鼠标交互如何实现呢？ Canvas context 本身没有像浏览器 DOM 一样的交互事件 EaselJS 如何在 canvas 内实现自己的鼠标事件系统？ 原理大致如下： Sta...

在 Dygraph 中，如果我们想展示竖线的时候，我们应该怎么做呢？ 一开始，想着直接手动 canvas 绘图？但是跟 Dygraph 上的默认行为，比如 hover 要做适配，很是麻烦。那么 Dygraph 中就没有实现...

使用canvas实现TOPO关系图 使用canvas从基本得一根线、一个形状到一个完整得topo关系图，需要面对那些问题呢？ 再社区中有很对基于canvas封装得图库，大大减少了使用canvas得计算等相关成本。比...

前言 今天网上瞎逛，看到了一个拾色器实现的原理，瞅了两眼发现代码这么少，这么简单。 于是，勾起了我一泡浓厚的兴趣。 赶紧赶工，润色了一下，这里，言简意赅的把里面包含的小知识点 和 测试...

系列文章 造轮子：滚轮选择器实现及原理解析(一) 造轮子：滚轮选择器实现及原理解析(二) 造轮子：滚轮选择器实现及原理解析(三) 造轮子：滚轮选择器实现及原理解析(源码) 实现效果 上方非循环滚...

哈喽大家好啊，我是广州小井。上一小节中，我们实战了一个渐变色立方体的绘制，学习了新的绘制api，但是在文章的结尾，我留下了个疑问，就是如何绘制一个6面为不同纯色的立方体呢？那我们这一节...

前一篇分析了三个基础显示类 这一篇分析另外四个稍显高级的显示类 -- Sprite、Movieclip、DOMElement、BitmapText SpriteSheet SpriteSheet 比较简单 它继承自 EventDispatcher 所以 SpriteShee...

leaferjs，全新的渲染引擎 1. 前言 前几天群里有人发了一个新 Canvas 渲染引擎的图片，看数据和宣传口号相当炸裂，号称只用 1.5s 可以渲染 100 万个矩形，还是个国产的。 出于个人兴趣，就花了...

1. 前言 最近我需要将网页的DOM输出为PDF文件，我使用的技术是html2Canvas和jsPDF。具体流程是，首先使用html2Canvas将DOM转化为图片，然后将图片添加到jsPDF中进行输出。 const pdf = new jsPD...

如何实现点选 我们如何控制鼠标在点击后将目标图元做高亮或其他处理呢？ 嗯....，在web端如果是svg或者是dom，我们可以简单绑定click事件修改样式, 那本文差不多也结束了。 ? 额，别急着划开，...

在 第一篇 中我们大致分析了从: 创建舞台 -> 添加显示对象-> 更新显示对象 的源码实现 这一篇将主要分析几个常用显示对象自各 draw 方法的实现 让我们看向例子 examples/Text_simple.html...

最近重构某项目的仪表板，代码屎山一样没眼看！果断弃之！从零开始！自己搞更香！ 1.功能需求 左侧和顶部有刻度标尺，跟着画板滚动而变化 缩略图，可以通过移动视图框来控制画板滚动 画板可放缩...

本次教程我们将介绍如何基于 p5.js 来实现经典的 starfield 星空隧道的的效果，教程将会涉及到粒子系统和物体的运动模拟等。 从上面的运行效果中可以看到很多星星从屏幕中心出现，然后以直线向...

哈喽大家好啊，我是广州小井。在学习和铺垫了很多枯燥无味的基础知识后，我们终于要开始接触到 WebGL 神奇的另外一面——三维图形了！于是乎，当我们学成以后，那种炫酷网页上面的 3D 效果对于...

因参与了公司的讲师课活动，所以开始了课程的编写和准备，同时也准备同步分享到掘金上，希望能给想学习canvas的jym提供一些帮助，当然更主要分享的目的是为了得到大佬的指点，在我不懂的问题上...

前言 上一篇我们实现了文字、图片的命中检测与拖拽，再做旋转的时候发现，旋转后的图形在做命中检测时有问题，因为图形已经旋转，但矩形的四点坐标仍然没变，导致无法命中，所以命中检测改为使...

哈喽大家好啊，我是广州小井。经过上两个小节的学习，我们基本掌握了矩阵在 WebGL 中的应用，2D的图形变换实现也不在话下了。那么这一小节，我们接着以上学习的变换效果，来实战图形动画，让图...

承上 在第一篇# 3D数字孪生 - Three.js 项目介绍与基础环境搭建（一）有介绍，在使用 three/filber 的Canvas组件时，默认情况下，会自动添加初始化一个透视相机（PerspectiveCamera），模拟了人...