我们遇到的一类H5，其中包括“强动画”效果，UI设计提供的是一系列序列帧的素材时，前端将序列帧素材还原成动画进行展示的H5. 采用gif格式的图片来展示序列帧动画，会存在图片文件大，移动端失真以及安卓端卡顿，以及循环播放情况下有时只会播放一次的情况。只能作为零碎的点缀素材时使用…

canvas 可以实现对图像的像素操作，这就要说到 getImageData() 方法了。 CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始…

由此，可以看到一个由小到大扩张的圆。由于没有擦除上一帧，每一帧的绘制结果都显示出来，所以呈现出来的是一个实心的圆。我想绘制的是一个闪烁的圆，那么可以把上一帧给擦除。 首先，先画一由底部到画布中央的延伸线。既然是运动的延伸线条，那起码会有一个起点坐标和一个终点坐标 如图。大概需要…

最近学习到了一种关于canvas的骨骼动画，听这个名字就知道他和canvas之前的动画不同，不知道你有没有兴趣了解一下呢？在开始之前，先来了解一下AlloyStick没错，就是长这样的，也算是符合预想

今天学一下canvas像素点操作。 下面的栗子简单实现了几个简单的滤镜效果，具体算法参考的这里，学过《数字图像处理》的同学应该对此理解更深刻。 然后被朋友圈吐槽抠图。其实当时就是站在一块绿幕前拍的😂 。 PS中魔法棒工具可以把图片中一定容差下的相近像素都选中、清空，轻松做到一…

程序创建完之后，我们需要需要对着色器进行动态控制才能达到我们所需要的功能。（如不知道怎么创建WebGL，可参考上篇文章）。 首先让我来介绍2个变量，我们需要借助这2个变量搭建的桥梁才能使JavaScript与GLSL ES之间进行沟通。 attribute： 用于顶点点着色器（…

低碳工业园区的建设与推广是我国推进工业低碳转型的重要举措，低碳工业园区能源与碳排放管控平台是低碳工业园区建设的关键环节。如何对园区内的企业的能源量进行采集、计量、碳排放核算，如何对能源消耗和碳排放进行实时动态监测等问题，涉及多个技术领域，专业性强。其数据不仅要求准确，更要求真实…

Canvas是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。J…

这次项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型做个汇总。 有些图片（例如下面这个jpg动图）太大，进行了一定程度的压缩，有点模糊（＾_＾）。 改进版：大小和亮暗用gap控制，近大远小，近亮远暗。 这篇文章画的是angle一个纬度，只要再增加另外一个纬度r…