随笔分类 -  html5

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

点击右上角即可分享
微信分享提示