janvas实现canvas火苗燃烧动画效果代码-html代码-BFW代码库

janvas实现canvas火苗燃烧动画效果代码

代码语言：html

所属分类：动画

代码描述：janvas实现canvas火苗燃烧动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<style>
    body{
        padding: 100px;
        background: black;
    }
</style>
  


</head>

<body>
  <div id="app" style="width: 120px;height: 200px;"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/janvas.js"></script>
      <script>
var fire = new janvas.Canvas({
  container: "#app",
  duration: Infinity,
  components: {
    Sprite: (function () {
      function Sprite(ctx, raf, duration, sx, sy, ex, ey, radius, color) {
        janvas.Animation.call(this, raf, duration, null, null, null, this.start);
        this.sx = sx, this.sy = sy, this.ex = ex, this.ey = ey, this.radius = radius;
        this.arc = new janvas.Arc(ctx, sx, sy, radius);
        this.arc.getStyle().setFillStyle(color);
      }

      janvas.Utils.inheritPrototype(Sprite, janvas.Animation);

      Sprite.prototype.onUpdate=function (ratio) {
        this.arc.setStart(this.sx + (this.ex - this.sx) * ratio,
          this.sy + (this.ey - this.sy) * ratio)
          .setRadius(this.radius * (1 - ratio * 0.8));
      };

.........完整代码请登录后点击上方下载按钮下载查看