html5表白模板怎么實現

這篇文章主要講解了“html5表白模板怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“html5表白模板怎么實現”吧！

　　HTML代碼如下：

　　（function（）{

　　var canvas=$（'#ke'+'leyi'）;

　　if （！canvas[0].getContext） {

　　$（"#error"）。show（）;

　　return false; }

　　var width=canvas.width（）;

　　var height=canvas.height（）;

　　canvas.attr（"width", width）;

　　canvas.attr（"height", height）;

　　var opts={

　　seed: {

　　x: width / 2 - 20,

　　color: "rgb（190, 26, 37）",

　　scale: 2

　　},

　　branch: [

　　[535, 680, 570, 250, 500, 200, 30, 100, [

　　[540, 500, 455, 417, 340, 400, 13, 100, [

　　[450, 435, 434, 430, 394, 395, 2, 40]

　　]],

　　[550, 445, 600, 356, 680, 345, 12, 100, [

　　[578, 400, 648, 409, 661, 426, 3, 80]

　　]],

　　[539, 281, 537, 248, 534, 217, 3, 40],

　　[546, 397, 413, 247, 328, 244, 9, 80, [

　　[427, 286, 383, 253, 371, 205, 2, 40],

　　[498, 345, 435, 315, 395, 330, 4, 60]

　　]],

　　[546, 357, 608, 252, 678, 221, 6, 100, [

　　[590, 293, 646, 277, 648, 271, 2, 80]

　　]]

　　]]

　　],

　　bloom: {

　　num: 700,

　　width: 1080,

　　height: 650,

　　},

　　footer: {

　　width: 1200,

　　height: 5,

　　speed: 10,

　　}

　　}

　　var tree=new Tree（canvas[0], width, height, opts）;

　　var seed=tree.seed;

　　var foot=tree.footer;

　　var hold=1;

　　canvas.click（function（e） {

　　var offset=canvas.offset（）， x, y;

　　x=e.pageX - offset.left;

　　y=e.pageY - offset.top;

　　if （seed.hover（x, y）） {

　　hold=0;

　　canvas.unbind（"click"）;

　　canvas.unbind（"mousemove"）;

　　canvas.removeClass（'hand'）;

　　}

　　}）。mousemove（function（e）{

　　var offset=canvas.offset（）， x, y;

　　x=e.pageX - offset.left;

　　y=e.pageY - offset.top;

　　canvas.toggleClass（'hand', seed.hover（x, y））;

　　}）;

　　var seedAnimate=eval（Jscex.compile（"async", function （） {

　　seed.draw（）;

　　while （hold） {

　　$await（Jscex.Async.sleep（10））;

　　}

　　while （seed.canScale（）） {

　　seed.scale（0.95）;

　　$await（Jscex.Async.sleep（10））;

　　}

　　while （seed.canMove（）） {

　　seed.move（0, 2）;

　　foot.draw（）;

　　$await（Jscex.Async.sleep（10））;

　　}

　　}））;

　　var growAnimate=eval（Jscex.compile（"async", function （） {

　　do {

　　tree.grow（）;

　　$await（Jscex.Async.sleep（10））;

　　} while （tree.canGrow（））;

　　}））;

　　var flowAnimate=eval（Jscex.compile（"async", function （） {

　　do {

　　tree.flower（2）;

　　$await（Jscex.Async.sleep（10））;

　　} while （tree.canFlower（））;

　　}））;

　　var moveAnimate=eval（Jscex.compile（"async", function （） {

　　tree.snapshot（"p1", 240, 0, 610, 680）;

　　while （tree.move（"p1", 500, 0）） {

　　foot.draw（）;

　　$await（Jscex.Async.sleep（10））;

　　}

　　foot.draw（）;

　　tree.snapshot（"p2", 500, 0, 610, 680）;

　　// 會有閃爍不得意這樣做， （＞﹏＜）

　　canvas.parent（）。css（"background", "url（" + tree.toDataURL（'image/png'） + "）"）;

　　canvas.css（"background", "#ffe"）;

　　$await（Jscex.Async.sleep（300））;

　　canvas.css（"background", "none"）;

　　}））;

　　var jumpAnimate=eval（Jscex.compile（"async", function （） {

　　var ctx=tree.ctx;

　　while （true） {

　　tree.ctx.clearRect（0, 0, width, height）;

　　tree.jump（）;

　　foot.draw（）;

　　$await（Jscex.Async.sleep（25））;

　　}

　　}））;

　　var textAnimate=eval（Jscex.compile（"async", function （） {

　　$（"#code"）。show（）。typewriter（）;

　　}））;

　　var runAsync=eval（Jscex.compile（"async", function （） {

　　$await（seedAnimate（））;

　　$await（growAnimate（））;

　　$await（flowAnimate（））;

　　$await（moveAnimate（））;

　　textAnimate（）。start（）;

　　$await（jumpAnimate（））;

　　}））;

　　runAsync（）。start（）;

　　}）（）;

　　適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。 不支持IE8及以下瀏覽器。

感謝各位的閱讀，以上就是“html5表白模板怎么實現”的內容了，經過本文的學習后，相信大家對html5表白模板怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！