随笔分类 - html5
摘要:导读 VTable: 不只是高性能的多维数据分析表格,更是行列间创作的方格艺术家! VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。 在现代应用程序中,表格组件是不可或缺的一部分,它们能够快速展示大量数据,并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎
阅读全文
摘要:WebGL为什么快 当我们在Canvas展示图形的过程中遇到了性能瓶颈时,总会第一个想到WebGL。我们都知道WebGL快,但是它为什么快呢。 GPU加速 可能有人会说Canvas2d也可以开启GPU加速,那么还有什么区别。区别还是有的,首先不论Canvas2d还是WebGL,最终到浏览器层时都是调
阅读全文
摘要:一、需求要点: 坐标系及画布方格: 缩放:涉及画布上的函数缩放及绘制范围等; 刻度单位变化:单位转化所需要的重新计算等; 函数表达式输入: 输入表示式输入规范的校验,是否复合规则; 输入表达式转程序语言的流程; 程序语言计算结果转为数学表达式展示; 模板管理: 模板切换数据状态管理; 模板保存、删除
阅读全文
摘要:一、html5中的template标签html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见,它设置了display:none;属性。 1 <!--当前页面只显示"我是自定义表现abc"这个内容,不显示"
阅读全文
摘要:context.arcTo() arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。 JavaScript 语法: context.arcTo(x1,y1,x2,y2,r); 参数描述 参数描述 x1 弧的起点的 x 坐标。 y1 弧的起点的 y 坐标。 x2 弧的终点的 x 坐标。 y2
阅读全文
摘要:0xFFFFFF或者#FFFFFF 表示白色,和RGB(255, 255, 255)一样。 0x表示16进制. 颜色有3个部分,红绿蓝。通常每个存储一个单字节。因此可以位于0,255。或者位于0,FF之间。颜色是#RGB, 因此可以为0x0 到0xFFFFFF. 随机数乘以0xFFFFF意味着可以生
阅读全文
摘要:Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域。它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下,剪辑区域的大小与Canvas画布大小一致。除非你通过创建路径并调用Canvas绘图环境对象的c
阅读全文
摘要:globalCompositeOperation的作用 在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。 简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeO
阅读全文
摘要:HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。 如果画布的高度或宽度是0,那么会返回字符串"data:,"。 如果传入的类型非"image/png",但是返回的
阅读全文
摘要:createPattern作用 createPattern() 方法在指定的方向内重复指定的元素。 元素可以是图片、视频,或者其他 <canvas> 元素。 被重复的元素可用于绘制/填充矩形、圆形或线条等等。 网站http://www.w3school.com.cn/tags/canvas_crea
阅读全文
摘要:图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案 -等等。事实证明,网上没有太多关于此的内容。在下面的示例中,您请大家查看演示源代码,以便了解正在发生的事情。 这篇教程将带您从基础知识(在画布上绘制原始鼠标跟随线),
阅读全文
摘要:canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果。 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一样的,每次绘制前都会去动态的改变画布上下文context的旋转角度值,导致CPU占用太多。 而且发现
阅读全文
摘要:1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来添加的, 参数的意思:(起点x.起点y,半径x,半径y,旋转的角度,起始角,结果角,顺时针还是逆时针
阅读全文
摘要:Canvas原理 Canvas我们把它翻译成画布,从字面意思我们就可以知道,不就是可以在上面画东西的布吗。好像很简单,没什么好说的。先看图: 从这几幅图我们可以看到以下几点: 1.每个小方格我们可以看作一个像素点。 2.Canvas和Screen的长和宽决定他们的图像,数据存储都可以看作是矩形数组(
阅读全文
摘要:1.在Firefox浏览器 draggable=false 不起作用的问题 https://stackoverflow.com/questions/26356877/html5-draggable-false-not-working-in-firefox-browser 2. svg在Firefox
阅读全文
摘要:隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari。 如下demo: Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Conte
阅读全文
摘要:学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据。 在判断填充的区域拉一条线出来,拉到图形的外面,这条拉出来的线就是辅助线。判断绘制的线是否是从辅助线的左边穿过到辅助线的右边,此时这种穿过的方
阅读全文
摘要:清空canvas画布内容 1、重置宽或高 由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.getElementById("myCanvas"); c.width=c.width; 2、clearR
阅读全文
摘要:也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? 运行这个html,监视任务管理器,发现在display:none 注释后性能下降至0,说明CSS3的动画效果不显示的时候是不消耗性能的。
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件里的一个画面包含很多个元素,但是当缩放到某个局部位置时,需要绘制的元素个数就很少。那么怎么判断某个元素是否需要进行绘制呢? 我们在绘制整个画面时,是进行循环遍历每个元素的,如下判断是否进行绘制的代码: 1 var elements =
阅读全文