使用Canvas设置圆形动画-如何展开以填充整个视口

Codepen

http://codepen.io/tconroy/pen/RPzxgz

基本设置：

我正在尝试创建一个页面，在一个居中的容器内有两列，最大宽度为1600px。

左列包含页面内容。右栏包含一个广告单元(比如640x480像素宽(。

在768px或更低的媒体断点处，2列应该堆叠(这样内容就在上面，广告就在下面(。

问题

加载页面时，屏幕中央应该有一个400x400px的画布元素，其中包含一个白色圆圈(绝对中心——垂直和水平(。

"圆"将设置动画到左列内容正后方的位置。

之后，圆圈应该"展开"以填充整个用户的视口，而不覆盖内容或导致出现滚动条。

如我下面的小提琴所示，我已经完成了最初的圆圈/动作动画，但我在试图找出展开部分时遇到了问题。我需要圆圈显示为增长/扩展，直到它覆盖整个视口，但所有文本内容/广告单元都不应被遮挡，动画不应显示滚动条。

我对画布非常陌生，所以如果有人能在不破坏最初动画的情况下帮助我，我将不胜感激。：(

http://codepen.io/tconroy/pen/RPzxgz

HTML:

<div class="container">
  <div class="navigation row">
    <h1 style="float:right;"><a href="#">Continue</a></h1>
  </div>
  <div class="content row">
    <div class="circle-wrap">
      <canvas class="circle" width="400" height="400"></canvas>
      <div class="template-output">
        <h1 class="title">
              <span class="upper">Title TopLine</span>
              <span class="lower">Title Bottom</span>
            </h1>
        <div class="body">
          <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum distinctio nesciunt nostrum magni neque. Iusto et delectus iure distinctio cupiditate, a sint doloremque ratione saepe sunt quisquam assumenda, eaque velit?</p>
          <p class="byline">- Author Name</p>
        </div>
      </div>
    </div>
  </div>

  <div class="ads row">
    <figure class="ad">
      <figcaption>Advertisement</figcaption>
      <div id="welcome"></div>
    </figure>
  </div>

</div>
</div>

CSS：

/* BASE STYLES */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html, body {
  width: 100%;
  height: 100%;
  background: gray;
  overflow: hidden;
}
/* END BASE STYLES */
/* LAYOUT */
.container {
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  outline: 1px solid black;
}
.row {
  width: 50%;
  height: 100%;
  float: left;
  display: block;
}
.row.content {
  border: 1px solid blue;
}
.row.ads {
  border: 1px solid red;
}
.row.navigation {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .row {
    width: 100%;
    height: auto;
  }
}
/* END LAYOUT STYLES */
/* ADVERTISEMENT */
.ad {
  display: table;
  margin: 0 auto;
}
.ad figcaption {
  text-align: center;
  margin: 0 auto;
}
.ad #welcome {
  outline: 1px solid black;
  background: darkgray;
  width: 640px;
  height: 480px;
  margin: 0 auto;
}
/* END ADVERTISEMENT STYLES */
/* CONTENT */
.content {
  min-height: 400px;
}
.content .template-output {
  width: 400px;
  position: relative;
}
.content .template-output .title {
  font-size: 4em;
}
.content .template-output .title span {
  display: block;
  text-transform: uppercase;
}
.content .template-output .title .upper {
  text-align: left;
}
.content .template-output .title .lower {
  text-align: right;
}
.content .template-output .body {
  position: relative;
}
.content .circle-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.content .circle-wrap .circle {
  width: 400px;
  height: 400px;
  outline: 1px solid black;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0%, 0%);
}
.content .circle-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
/* END CONTENT STYLES */

JAVASCRIPT(包括：jQuery和GSAP TweenMax库(

/*
  I have successfully created the canvas element in the center 
  of the screen and animate it to the left column. Now, I want the circle to "expand" behind the content, and fill the entire viewport.
  It should not cause scrollbars to appear or cover the text content.
*/
(function () {
    var tl = new TimelineMax();
    var $canvas = $('.circle'),
        $canvas_wrap = $('.circle-wrap'),
        canvas = $canvas[0],
        context = canvas.getContext('2d'),
        canvas_width = canvas.width,
        canvas_height = canvas.height;
        context.globalCompositeOperation='destination-over';
    draw(context);

    /* TIMELINE STUFF */
    var canvas_opts = {
        'center-to-destination': {
            xPercent: -50,
            yPercent: -50,
            top: '50%',
            left: '100%',
            delay: 1.5
        }
    };
    tl.from(canvas, 1, canvas_opts['center-to-destination']);

})();

(function() {
  var container = $('.container');
  var canvas = $('.circle')[0];
  var context = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  TweenMax.set(container, { position: 'absolute', zIndex: 1 });
  TweenMax.set(canvas, { position: 'absolute', zIndex: 0 });
  var canvasProps = {
    currX: window.innerWidth * 0.5,
    currY: window.innerHeight * 0.5,
    currRadius: 0
  };
  TweenLite.ticker.addEventListener('tick', render, false);
  TweenMax.to(canvasProps, 1, { currRadius: 200, ease: Expo.easeInOut });
  TweenMax.to(canvasProps, 1, { delay: 1, currX: 200, ease: Expo.easeInOut });
  TweenMax.to(canvasProps, 1, { delay: 2, currRadius: window.innerWidth, ease: Expo.easeInOut });
  function render() {
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
    context.beginPath();
    context.arc(canvasProps.currX, canvasProps.currY, canvasProps.currRadius, 0, Math.PI * 2, true);
    context.fillStyle = 'white';
    context.fill();
  }
})();

var newWidth = $('#left_column').width();
var growBy = newWidth/canvas_width;
var grow_opts = {
    'grow': {
        scale: growby,
        transformOrigin "0px 0px",
        delay: 1.5
    }
};
tl.to(canvas, 1, grow_opts['grow']);