kdxcxs
5 years ago
1 changed files with 97 additions and 0 deletions
@ -0,0 +1,97 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>First Cube</title> |
|||
</head> |
|||
<body> |
|||
<button onclick="run()" style="position: fixed; top: 0px; right: 0px;">start</button> |
|||
<canvas id="fc-cv-0" style="z-index: 1; position: fixed; top: 0px; left: 0px"></canvas> |
|||
<canvas id="fc-cv-1" style="z-index: 0; position: fixed; top: 0px; left: 0px"></canvas> |
|||
</body> |
|||
<script> |
|||
// 相似的注释在First_Cube.py里面都有,就不写了 |
|||
var points = [[-1,1,-1], |
|||
[1,1,-1], |
|||
[-1,-1,-1], |
|||
[1,-1,-1], |
|||
[-1,1,1], |
|||
[1,1,1], |
|||
[-1,-1,1], |
|||
[1,-1,1]] |
|||
var pit = [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]] |
|||
var angle = 0 |
|||
var speed = 1 |
|||
var fps = 60 |
|||
var dist = [5,4] |
|||
var st = 1/fps*1000 |
|||
var apf = Math.PI * speed / fps |
|||
// init canvas |
|||
var cvs = [document.getElementById('fc-cv-0'),document.getElementById('fc-cv-1')] |
|||
for(i in cvs){ |
|||
cvs[i].width = 800; |
|||
cvs[i].height = 600; |
|||
} |
|||
var ctx = [cvs[0].getContext('2d'),cvs[1].getContext('2d')] |
|||
var offset = [400,600] |
|||
showingCv = 0 |
|||
hiddenCv = 1 |
|||
|
|||
function drawLine(x1,y1,x2,y2,ctx) { |
|||
ctx.beginPath() |
|||
ctx.lineWidth='5' |
|||
ctx.color='black' |
|||
ctx.moveTo(x1,y1) |
|||
ctx.lineTo(x2,y2) |
|||
ctx.stroke() |
|||
} |
|||
|
|||
function rotate() { |
|||
angle += apf |
|||
if (angle > 2*Math.PI){ |
|||
angle -= 2*Math.PI |
|||
} |
|||
var radius = Math.sqrt(2) |
|||
var center = [0,0] |
|||
pairs = [[0,4,-Math.PI/4], [1,5,Math.PI/4], [2,6,-Math.PI*3/4], [3,7,Math.PI*3/4]] |
|||
for (pair in pairs){ |
|||
center = [radius*Math.sin(angle+pairs[pair][2]),radius*Math.cos(angle+pairs[pair][2])] |
|||
// x |
|||
points[pairs[pair][0]][0] = center[0] |
|||
points[pairs[pair][1]][0] = center[0] |
|||
// y |
|||
points[pairs[pair][0]][1] = center[1] |
|||
points[pairs[pair][1]][1] = center[1] |
|||
} |
|||
} |
|||
|
|||
function draw() { |
|||
for (pt in pit){ |
|||
rate = dist[1]/(dist[0]+points[pt][1]) |
|||
scale = 200 |
|||
pit[pt][0] = points[pt][0]*rate*scale |
|||
pit[pt][1] = points[pt][2]*rate*scale |
|||
} |
|||
ctx[hiddenCv].clearRect(0, 0, cvs[hiddenCv].width, cvs[hiddenCv].height) |
|||
var dcps = [[1,[0,3,5]],[2,[0,3,6]],[4,[0,5,6]], [7,[3,5,6]]] |
|||
for (t in dcps){ |
|||
var dcp=dcps[t][0] |
|||
var nps=dcps[t][1] |
|||
for (np in nps){ |
|||
drawLine(pit[dcp][0]+400,pit[dcp][1]+300,pit[nps[np]][0]+400,pit[nps[np]][1]+300,ctx[hiddenCv]) |
|||
} |
|||
} |
|||
cvs[showingCv].style.zIndex = 0 |
|||
cvs[hiddenCv].style.zIndex = 1 |
|||
showingCv,hiddenCv = hiddenCv,showingCv |
|||
} |
|||
|
|||
function run() { |
|||
document.intervals = [] |
|||
t = setInterval(rotate,st) |
|||
document.intervals.push(t) |
|||
t = setInterval(draw,st) |
|||
document.intervals.push(t) |
|||
} |
|||
</script> |
|||
</html> |
Loading…
Reference in new issue