实现3D图文粒子化

Demo图片/文字粒子化首先需要取得图片或者文字的像素点,可以将它们绘制到 canvas 上得到它们的像素点,主要使用 getImageData(x, y, width, height) 方法获取。然后通过遍历画布的大小得到每个位置像素点,为了让粒子之间互相有间隔,遍历的时候用一个变量来控制像素点数量,最后再将透明的点(alpha值小于128)过滤掉即可得到最终的像素点。离散动画实现将粒子目标位置...

创建三维图形

点成线,线成面。利用预设好的x,y值来初始化点,再将各坐标点连线就能构成一个平面图形。因为是在一个平面上,所以各个点的z值是相同的,只需要定义好x,y坐标的值即可。Demo创建坐标点:设置每个点的消失点和中心点:将坐标点依次连线(连线的时候每个点的x,y值都是经过透视图计算的,因为是在三维里,所以不是用之前定义好的坐标):使用三角形所有的三维图形在绘制前都会简化为一个三角形集合。使用三角形的好处:...

三维坐标旋转

二维的坐标旋转绕Z轴旋转,物体只有x、y坐标会变化(风车旋转),三维中还可以绕x和y轴旋转。绕x轴旋转:只有y、z坐标会变化(轮胎滚动)。绕y轴旋转,只有x,z坐标会变化(唱片机)。旋转公式二维:三维绕x轴:三维绕y轴:模拟三维坐标旋转Demo...

三维Z轴、透视图

Z轴除X,Y轴外,三维存在另外一个维度:深度,用Z表示。右手坐标系统:Z轴数值越大表示物体远离观察者,反之接近观察者。左手坐标系统:Z轴数值越大表示物体接近观察者,反之远离观察者。透视图三维中,尽管两个物体有相同的xy坐标,但是由于深度(z)不一样,所以会在不同的位置,透视图可以知道应该把物体放到哪个位置。 物体的远离(Z轴增加),X和Y向消失点移动。因为缩放比例和接近消失点的比例相同,所以根据距...

Canvas 实现 3D 云朵

页面使用了ES6,必须开启相关的功能才可以看到效果。Chrome 打开 chrome:flags 启用 Experimental Web Platform featuresDemo实现代码...