Canvas / SVG / VML
文章平均质量分 95
记录canvas svg vml 相关知识
凯小默
专注前端领域开发。
展开
-
【性能篇】29 # 怎么给Canvas绘制加速?
【跟月影学可视化】学习笔记。例子:实现一些位置随机的多边形,并且不断刷新这些图形的形状和位置 我们f12查看帧率,效果如下:Google Chrome浏览器怎么开启查看帧率功能?对于一个 500 边形来说,它的顶点数量非常多,所以 Canvas 需要执行的绘图指令也会非常多,那绘制很多个 500 边形自然会造成性能问题。下面减少绘制 500 边形的绘图指令的数量:用 -1 代替正 500 边形,如果type小于0表名多边形是正500边形,用 arc 指令来画圆 优化完之后的效果:具体做法就是将图形缓存下来,原创 2022-12-20 15:24:51 · 1695 阅读 · 0 评论 -
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?
【跟月影学可视化】学习笔记。SVG 的全称是 Scalable Vector Graphics,可缩放矢量图,它是浏览器支持的一种基于 XML 语法的图像格式。SVG 可以作为 HTML 内嵌元素使用,也可以作为图像通过 img 元素加载,或者绘制到 Canvas 内。svg 元素是 SVG 的根元素,属性 xmlns 是 xml 的名字空间。 SVG 坐标系和 Canvas 坐标系完全一样,都是以图像左上角为原点,x 轴向右,y 轴向下的左手坐标系。可以通过给 svg 元素设置 viewBox 属性,来改原创 2022-10-09 11:30:29 · 588 阅读 · 0 评论 -
【图形基础篇】02 # 指令式绘图系统:如何用Canvas绘制层次关系图?
【跟月影学可视化】学习笔记。Canvas 元素上的 width 和 height 属性不等同于 Canvas 元素的 CSS 样式的属性。这样分开能更方便地适配不同的显示设备。Canvas 的 HTML 属性宽高为画布宽高,CSS 样式宽高为样式宽高。 默认左上角为坐标原点,x 轴水平向右,y 轴垂直向下。首先是获取 Canvas 元素。 通过 getContext 方法拿到它的上下文对象。 3.2、用 Canvas 上下文绘制图形 context 对象 API 需要实现下面的效果json数据如下: 这里使原创 2022-10-08 18:48:14 · 1304 阅读 · 0 评论 -
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件
2017 前端星计划选拔作业学习笔记源码笔记:用户用手指按顺序依次划过 9 个原点中的若干个(必须不少于 4 个点),如果划过的点的数量和顺序与之前用户设置的相同,那么当用户的手指离开屏幕时,判定为密码输入正确,否则密码错误。要求:实现一个移动网页,允许用户设置手势密码和验证手势密码。已设置的密码记录在本地 localStorage 中。用户选择设置密码时,要提示用户输入手势密码。如果用户输入的密码不足 5 个点,提示用户密码太短。设置成功一次密码后,提示用户再次输入密码。如果用户输入的两次密码不一致,提示原创 2022-09-15 18:31:23 · 1795 阅读 · 0 评论