3D投影动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D projection</title> <style> body {margin: 0;} canvas {position: absolute;} </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var w = canvas.width = window.innerWidth; var h = canvas.height = window.innerHeight; var w2 = w / 2,h2 = h / 2; var cos = Math.cos,sin = Math.sin,pi = Math.PI; var mode = true; var K = 200; var a1 = 0; var a2 = 0; function project(x, y, z) { let x1 = x * cos(a1) + z * sin(a1); let y1 = y; let z1 = -x * sin(a1) + z * cos(a1); let x2 = x1; let y2 = y1 * cos(a2) + z1 * sin(a2); let z2 = -y1 * sin(a2) + z1 * cos(a2); z2 += 300; let d = 500 / z2; let x3 = K / z2 * x2 + w2; let y3 = K / z2 * y2 + h2; ctx..........完整代码请登录后点击上方下载按钮下载查看
网友评论0