温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html5表白模板怎么实现

发布时间:2022-03-14 17:25:59 来源:亿速云 阅读:254 作者:iii 栏目:web开发

这篇文章主要讲解了“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表白模板怎么实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI