摘要: 效果结尾处可验收。 画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"></canvas> 使用pointer事件监听,落笔,拖拽,收笔。 document.onpointerdown = function (e) { if 阅读全文
posted @ 2021-06-28 16:26 方帅 阅读(3695) 评论(24) 推荐(12) 编辑
摘要: 转盘效果 本文章讲解怎么实现这样一个螺旋转盘动态效果。不停旋转,箭头指向的扇形会变成高亮,整个转盘有个渐变效果,中间镂空。 利用图片填充颜色 首先准备如下三张图 三张图怎么利用? 思路大概下面所标示的。第一张和第三种是盖到第二张上的,第二张图作为填充圆形的颜色。 因为用canvas本身的shadow 阅读全文
posted @ 2021-05-07 11:04 方帅 阅读(734) 评论(0) 推荐(3) 编辑
摘要: canvas的主要功能就是用来绘制内容,有时候为了给用户流畅的视觉感受,需要绘制的频率要求很高,这样对绘制的性能就有要求,那么怎么才能写出高性能的绘制代码呢。 尽可能少调用api 例如我们绘制一段线条,如果用如下代码的话,每移动一次就stroke一次: 1 for (var i = 0; i < p 阅读全文
posted @ 2021-04-30 14:47 方帅 阅读(4407) 评论(0) 推荐(2) 编辑
摘要: 子模式 在使用正则表达式的时候,我们经常会使用()把某个部分括起来,称为一个子模式。 子模式有Capturing和Non-Capturing两种情况。 Capturing指获取匹配or捕获匹配 ,是指系统会在幕后将所有的子模式匹配结果保存起来,供我们查找或者替换。如后向引用的使用; Non-Capt 阅读全文
posted @ 2021-01-15 11:18 方帅 阅读(3660) 评论(0) 推荐(2) 编辑
摘要: HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。 如果画布的高度或宽度是0,那么会返回字符串"data:,"。 如果传入的类型非"image/png",但是返回的 阅读全文
posted @ 2018-12-10 11:45 方帅 阅读(10429) 评论(1) 推荐(2) 编辑
摘要: 在二维平面上,常用的有以下三种基本的图形变化: 1)Translation 2)Scale 3)Rotation 在canvas的开发中,我们也经常会用到这样的一些图形变换,尤其是我们在写自定义View时,更是会经常利用到Matrix来实现一些效果,比如平移,旋转,缩放及切变等,相信很多朋友应该很想 阅读全文
posted @ 2018-07-17 16:46 方帅 阅读(7391) 评论(3) 推荐(0) 编辑
摘要: 坐标轴的旋转 不改变坐标原点的位置和单位长度,只改变坐标轴方向的坐标系的变换,叫做坐标轴的旋转. 设点M在原坐标系中的坐标为(x,y),对应向量的模为r,幅角为α.将坐标轴绕坐标原点,按照逆时针方向旋转角θ形成新坐标系,点M在新坐标系中的坐标为(如图2-4),则 由此得到坐标轴的旋转的坐标变换公式 阅读全文
posted @ 2018-03-22 11:17 方帅 阅读(58271) 评论(0) 推荐(4) 编辑
摘要: 清空canvas画布内容 1、重置宽或高 由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.getElementById("myCanvas"); c.width=c.width; 2、clearR 阅读全文
posted @ 2017-07-17 16:17 方帅 阅读(31769) 评论(3) 推荐(5) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系。那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢。 具体代码 首先请看下面的一段代码(下文具体解释代码作用): 1 阅读全文
posted @ 2016-07-08 15:37 方帅 阅读(6067) 评论(0) 推荐(3) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响。 函数 方法 描述 translate dx,dx 转 阅读全文
posted @ 2016-07-06 16:45 方帅 阅读(31561) 评论(0) 推荐(6) 编辑
摘要: 导读 VTable: 不只是高性能的多维数据分析表格,更是行列间创作的方格艺术家! VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。 在现代应用程序中,表格组件是不可或缺的一部分,它们能够快速展示大量数据,并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎 阅读全文
posted @ 2023-10-09 16:11 方帅 阅读(643) 评论(0) 推荐(2) 编辑
摘要: 批量修改 GitHub 代码提交作者需要进行以下步骤: 该操作如果涉及default分支的话 请确保有push的权限! 首先,你需要 clone 远程仓库到本地,使用以下命令: git clone <repository-url> ``` 将 `<repository-url>` 替换为要克隆的仓库 阅读全文
posted @ 2023-06-13 14:05 方帅 阅读(324) 评论(0) 推荐(1) 编辑
摘要: 在前端性能监控中,大量的垃圾回收(GC)通常是由以下原因导致的: 内存泄漏:当页面中的对象没有被正确地释放或引用计数错误时,会导致内存泄漏。当内存中的对象达到一定数量时,JavaScript 引擎会执行垃圾回收以释放这些不再使用的对象,从而导致大量的 GC。 频繁的创建和销毁对象:如果页面中频繁创建 阅读全文
posted @ 2023-04-21 11:29 方帅 阅读(77) 评论(0) 推荐(0) 编辑
摘要: npm publish 此命令发布latest版本 npm publish --tag=alpha 发布alpha版本(测试版本) 紧急回退包方案: 分享一下bnpm给的处理方案 如果因为发布的新版本的包有问题,需要紧急回退的话,不用进行删包,直接用下面命令修改 latest 指向就行 npm di 阅读全文
posted @ 2022-05-21 14:28 方帅 阅读(253) 评论(0) 推荐(0) 编辑
摘要: 问题: 之前在一些开源项目的源码里,以及一些文章里,见到如下这样的require/import路径,其中包含形如!.的片段,不知道是什么意思: // https://juejin.im/post/6844903504352378894#heading-10 require("any-template 阅读全文
posted @ 2021-08-13 16:04 方帅 阅读(398) 评论(0) 推荐(0) 编辑
摘要: 下面这张图一定多看几遍,看不懂的话,请对照下面我的理解,一条条深入分析。 自己对上图的理解: f1,f2是构造函数Foo的实例(这里还可以考察new的过程) f1,f2的原型f1._proto和他们的构造函数Foo的原型对象Foo.prototype指向同一内存地址 构造函数Foo的原型对象Foo. 阅读全文
posted @ 2021-07-29 14:16 方帅 阅读(144) 评论(0) 推荐(0) 编辑
摘要: 我们拿下图中的沿着线段轨迹移动的原点来举例,怎么来实现这个动画! 1)定义路径集合Path,里面规定关键坐标点如startPoint和endPoint,设置从startPoint移动到endPoint的时间duration。 如下json对象,我们有6段路径,分别进行了定义。我们将下面这个列表集合命 阅读全文
posted @ 2021-06-29 17:01 方帅 阅读(975) 评论(6) 推荐(0) 编辑