专题：可视化
共10篇相关文章
如何用WebGL制作网格背景效果？
作为前端开发人员，我们最关注的就是应用的交互体验，而元素背景是最基础的交互体验之一。一般而言，能够使用代码实现的界面，我们都会尽可能减少图片的使用。除了使用CSS，我们还可以通过WebGL实现某些效果。...
WebGL如何实现缩放平移的精细控制？
在上篇文章中，我们使用WebGL实现了网格背景，当时有提到说使用WebGL来实现的好处之一，是网格背景可以与画布上的其他元素更好地融合，比如一起缩放平移，那么在WebGL中怎么实现缩放和平移呢？现在我们已经实现了网格背景，接下来我们就用网格...
如何用Canvas实现图片局部放大镜功能？
最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果，在这节课程的结尾留了一道局部放大镜的题目，提示我们用像素处理的方式去实现这个效果，最终实现随着鼠标移动将图片局部放大，以下是我对这个效果的简单实现。...
如何用WebGL绘制圆形，实现色盘？
在Canvas2D中实现圆形的绘制比较简单，只要调用`arc`指令就能在Canvas画布上绘制出一个圆形，类似的，在SVG中我们也只需要一个`circle`标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢？...
如何用WebGL实现局部马赛克的复杂疑问？
在Canvas2D中通过调用`drawImage` API就能将图像绘制到画布上，在WebGL中我们也可以绘制图像，在绘制时我们需要用到WebGL中的纹理对象，在之前实现网格背景的视频中，我使用了一个叫做纹理坐标的配置，现在要完成纹理的加载...
WebGL中，如何通过着色器实现复杂几何造型设计？
本文将介绍如何使用着色器来进行几何造型，说到几何图形大家一定都不陌生，比如说三角形、圆形，在WebGL中除了直接使用顶点绘制，我们还可以使用片元着色器进行造型，以下将介绍三角形的绘制，以及应用场景。...
如何通过极坐标参数方程和SDF绘制出令人惊叹的复杂图案？
本文将介绍如何使用极坐标参数方程和上一篇文章提到的距离场SDF来绘制有趣的图案。有些曲线比起直角坐标系来说，更方便使用极坐标来表示，这个时候我们可以选择通过极坐标和直角坐标的相互转换，来实现图形的绘制...
如何利用噪声生成纹理进行可视化学习？
什么是噪声呢？在自然界中，离散的随机是比较常见的，比如蝉鸣突然响起又突然停下，比如雨滴随机落在一个位置，但是随机和连续并存是更常见的情况，比如山脉的走向是随机的，但山峰之间的高度又是连续的，比如天上的云朵、水面的波纹等等。这种把随机和连续结...
如何通过后期处理通道增强实现图像效果的疑问？
GPU是并行渲染的，这样的渲染很高效。但是在实际需求中，有时我们计算片元色值时，需要依赖周围像素点或者某个其他位置像素点的颜色信息，这样的话想要一次性完成绘制就无法做到，需要对纹理进行二次加工处理。...
如何制作简单动画使图形动态展示？
在可视化展现中，动画是强化数据表达，吸引用户的重要技术手段，本文将介绍动画的三种实现形式，以及如何具体地在HTMLCSS和Shader中去实现动画。...