小程序中使用 canvas 制作 5 维雷达图(结合小学六年级三角函数知识)

背景

微信小程序项目中需要制作一个 5 维雷达图(如图一),许多人第一时间可能想到的就是去找插件解决问题,其实小程序的数据可视化的插件还真有,但就为了这一个小图非得去把整个笨重的图形库引进来,这就直接拖慢了小程序的加载速度。使用小程序里的 canvas,结合小学六年级三角函数几何知识,其实我们完全可以很快 DIY 一个 5 维雷达图出来 继续阅读“小程序中使用 canvas 制作 5 维雷达图(结合小学六年级三角函数知识)”

前端 Canvas 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图之二维向量 (vector2) 函数库

前言

上一篇《前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图》介绍了在 canvas 中如何使用矩阵(matrix),及如何使用矩阵进行图形变换(transform)。但里面有用到的向量并没有详细介绍,本篇通过结合一个向量的函数工具库来介绍一下向量的应用,因为向量主要是用来描述对象的长度 / 运动距离,一般会在 canvas 动画里面会派上用场, 继续阅读“前端 Canvas 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图之二维向量 (vector2) 函数库”

前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图

前言

使用 canvas 画布来操控图形或者图片的二维变化的方式一般是平移、缩放、和旋转。canvas 已相应提供了相关的 api。如:translate(), scale() 和 rotate(),但这些功能无法统一处理并且无法描述当前画布的处于某种状态。为了实现这种统一连贯性的状态描述,canvas 给我们提供了另外一种思路及方法,即使用:transform() / setTransform();因为画布上的每个对象都拥有一个当前的 3 x 3 变换矩阵, 继续阅读“前端 Canvas 用法之 – 使用矩阵 (matrix) + 向量 (vector) 操控画布绘图”

Three.js 入门篇-制作 3D 动漫角色欣赏

前言

废话不多说,先上一波炫酷前端效果展示,点我去欣赏。最近有个任务,刚搞完一个卡通网 kt5.cn,没有一点点流量。 如何为卡通网带来点人气呢? ,于是就有了这篇《Three.js 制作 3D 动漫角色欣赏篇》,顺便想带旺一下给卡通网。 继续阅读“Three.js 入门篇-制作 3D 动漫角色欣赏”