Line 20: | Line 20: | ||
var imgy; | var imgy; | ||
− | + | var w1 = "https://static.igem.org/mediawiki/2018/a/a8/T--NEU_China_B--w1.png"; | |
− | var timer = setInterval(function () { | + | var w2 = "https://static.igem.org/mediawiki/2018/f/f9/T--NEU_China_B--w2.png"; |
− | + | var w3 = "https://static.igem.org/mediawiki/2018/2/27/T--NEU_China_B--w3.png"; | |
− | + | var w4 = "https://static.igem.org/mediawiki/2018/9/96/T--NEU_China_B--w4.png"; | |
− | + | var w5 = "https://static.igem.org/mediawiki/2018/7/7a/T--NEU_China_B--w5.png"; | |
− | + | var img1 = new Image(); | |
− | + | var img2 = new Image(); | |
− | + | var img3 = new Image(); | |
− | + | var img4 = new Image(); | |
− | + | var img5 = new Image(); | |
− | + | img1.src = w1; | |
+ | var during = 40; | ||
+ | var t1 = 0; | ||
+ | var base_t1 = 0; | ||
+ | var t2 = 0; | ||
+ | var base_t2 = base_t1 + during; | ||
+ | var t3 = 0; | ||
+ | var base_t3 = base_t2 + during; | ||
+ | var t4 = 0; | ||
+ | var base_t4 = base_t3 + during; | ||
+ | var t5 = 0; | ||
+ | var base_t5 = base_t4 + during; | ||
+ | |||
+ | |||
+ | img1.onload = function () { | ||
+ | img2.src = w2; | ||
+ | img2.onload = function () { | ||
+ | img3.src = w3; | ||
+ | img3.onload = function () { | ||
+ | img4.src = w4; | ||
+ | img4.onload = function () { | ||
+ | img5.src = w5; | ||
+ | img5.onload = function () { | ||
+ | console.log("finish"); | ||
+ | var timer = setInterval(function () { | ||
+ | ctx.clearRect(0, 0, width, height); | ||
+ | |||
+ | i += 0.00001; | ||
+ | |||
+ | t1 = i + base_t1; | ||
+ | t2 = i + base_t2; | ||
+ | t3 = i + base_t3; | ||
+ | t4 = i + base_t4; | ||
+ | t5 = i + base_t5; | ||
+ | |||
+ | var img1_x = 400 * Math.cos(t1 * 180 * 2) + basex; | ||
+ | var img1_y = 200 * Math.sin(t1 * 180 * 4) + basey; | ||
+ | ctx.drawImage(img1, img1_x, img1_y, img1.width/4, img1.height/4); | ||
+ | |||
+ | var img2_x = 400 * Math.cos(t2 * 180 * 2) + basex; | ||
+ | var img2_y = 200 * Math.sin(t2 * 180 * 4) + basey; | ||
+ | ctx.drawImage(img2, img2_x, img2_y, img2.width/4, img2.height/4); | ||
+ | |||
+ | |||
+ | var img3_x = 400 * Math.cos(t3 * 180 * 2) + basex; | ||
+ | var img3_y = 200 * Math.sin(t3 * 180 * 4) + basey; | ||
+ | ctx.drawImage(img3, img3_x, img3_y, img3.width/4, img3.height/4); | ||
+ | |||
+ | |||
+ | var img4_x = 400 * Math.cos(t4 * 180 * 2) + basex; | ||
+ | var img4_y = 200 * Math.sin(t4 * 180 * 4) + basey; | ||
+ | ctx.drawImage(img4, img4_x, img4_y, img4.width/4, img4.height/4); | ||
+ | |||
+ | var img5_x = 400 * Math.cos(t5 * 180 * 2) + basex; | ||
+ | var img5_y = 200 * Math.sin(t5 * 180 * 4) + basey; | ||
+ | ctx.drawImage(img5, img5_x, img5_y, img5.width/4, img5.height/4); | ||
+ | |||
+ | // if (y > 400) { | ||
+ | // clearInterval(timer); | ||
+ | // } | ||
+ | }, 10); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
} | } | ||
Revision as of 06:58, 16 October 2018