随笔分类 - Canvas
摘要:导读 VTable: 不只是高性能的多维数据分析表格,更是行列间创作的方格艺术家! VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。 在现代应用程序中,表格组件是不可或缺的一部分,它们能够快速展示大量数据,并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎
阅读全文
摘要:WebGL为什么快 当我们在Canvas展示图形的过程中遇到了性能瓶颈时,总会第一个想到WebGL。我们都知道WebGL快,但是它为什么快呢。 GPU加速 可能有人会说Canvas2d也可以开启GPU加速,那么还有什么区别。区别还是有的,首先不论Canvas2d还是WebGL,最终到浏览器层时都是调
阅读全文
摘要:我们拿下图中的沿着线段轨迹移动的原点来举例,怎么来实现这个动画! 1)定义路径集合Path,里面规定关键坐标点如startPoint和endPoint,设置从startPoint移动到endPoint的时间duration。 如下json对象,我们有6段路径,分别进行了定义。我们将下面这个列表集合命
阅读全文
摘要:效果结尾处可验收。 画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"></canvas> 使用pointer事件监听,落笔,拖拽,收笔。 document.onpointerdown = function (e) { if
阅读全文
摘要:转盘效果 本文章讲解怎么实现这样一个螺旋转盘动态效果。不停旋转,箭头指向的扇形会变成高亮,整个转盘有个渐变效果,中间镂空。 利用图片填充颜色 首先准备如下三张图 三张图怎么利用? 思路大概下面所标示的。第一张和第三种是盖到第二张上的,第二张图作为填充圆形的颜色。 因为用canvas本身的shadow
阅读全文
摘要:canvas的主要功能就是用来绘制内容,有时候为了给用户流畅的视觉感受,需要绘制的频率要求很高,这样对绘制的性能就有要求,那么怎么才能写出高性能的绘制代码呢。 尽可能少调用api 例如我们绘制一段线条,如果用如下代码的话,每移动一次就stroke一次: 1 for (var i = 0; i < p
阅读全文
摘要:我们的项目是面向学校老师的教学软件,所以肯定少不了互动白板的功能,而这个里面的画笔功能是由我来开发的,下面介绍这个过程中遇到的问题以及解决方法。 首先给大家明确下由于软件中的画布可以自由移动,会超出屏幕显示范围,同时支持点擦和线擦,所以需要存储所有点坐标。 第一版简单画笔实现并优化掉折线感 第一版实
阅读全文
摘要:应用场景 我们的项目中有个功能是,canvas上的某个图片选中后可以再这个图片上用鼠标拖拽绘制画笔线条。 当然绘制的边界要控制在图片大小范围内的,那么鼠标是可以随意动的,怎么能控制只在图片上的时候才绘制呢? Canvas 2D API 有直接提供的方法:CanvasRenderingContext2
阅读全文
摘要:项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为5像素,那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px,所以再绘制时赋值给context.lineWidth的值需要一个计算过程(利用canvas当前缩放值来计算出一个值)。
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 插入图表 首先介绍我们的图表功能,点击插入图表弹出如下数据表格窗口,可以填写表格数据,点击确定,默认生成表格图 编辑图表 表格图选中,可以进行编辑。右侧会出现图标类型,数据编辑,属性设置。这里支持highcharts里面的柱状图,折线图,
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 因为用户有可能会插入大量图片到软件中,canvas绘制起来性能堪忧,缩放或者平移画布会出现卡顿的现象。这跟图片的大小有很大关系,越是高清大图,绘制到canvas上,特别是在canvas缩小的情况下,越耗费性能。 所以我们打算分等级去绘制图
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 可参考 绘制图片 现在我们绘制视频同样使用drawImage this.context.drawImage(videoElement, x, y, width, height); 因为视频播放时连续不同的画面,需要用到帧循环去不断绘制。这
阅读全文
摘要:我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线。 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔。那可能会觉得绘制画笔的时候加上透明度就可以了。我们来在原来代码上设置 ctx.globalAlpha属性为0.3,或者将strokeStyle设置为rg
阅读全文
摘要:功能需求 项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas的同学来说,这个需求很简单,大致逻辑如下: 1)监听事件pointerdown,pointermove,pointerup 2)标记是否拖拽画线模式变量 isDrawing,在down事件时置为true,up的时候置
阅读全文
摘要:context.arcTo() arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。 JavaScript 语法: context.arcTo(x1,y1,x2,y2,r); 参数描述 参数描述 x1 弧的起点的 x 坐标。 y1 弧的起点的 y 坐标。 x2 弧的终点的 x 坐标。 y2
阅读全文
摘要:本文目的: 现在有一条二次贝塞尔曲线,控制点坐标分别为:P0(3,8),P1(2,3),P2(2,7),如果想要返回 10 个在贝塞尔曲线上的点,可以理解为将该曲线分成10端(实际是11个点组成,不过我们的逻辑是返回除最后一个点外的10个点) 如果想对贝塞尔曲线有更深入的理解,可以学习这篇文章:贝塞
阅读全文
摘要:Bezier曲线的由来 1962年,法国工程师贝塞尔发表,他运用贝塞尔曲线来为汽车的主体进行设计 Bezier曲线的作用 Bezier曲线是用一系列点控制曲线状态的。主要分为 数据点:确定曲线的起始和结束位置 控制点:确定曲线的弯曲程度 举例理解:想在AC(起始点和结束点)之间画一个曲线,用B点(控
阅读全文
摘要:Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域。它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下,剪辑区域的大小与Canvas画布大小一致。除非你通过创建路径并调用Canvas绘图环境对象的c
阅读全文
摘要:globalCompositeOperation的作用 在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。 简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeO
阅读全文
摘要:HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。 如果画布的高度或宽度是0,那么会返回字符串"data:,"。 如果传入的类型非"image/png",但是返回的
阅读全文