canvas适应全屏动画鼠标移动有线条互动

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class="container demo-1">

        <div class="content">

            <div id="large-header" class="large-header">

                <canvas id="demo-canvas"></canvas>

                <h1 class="main-title">Connect <span class="thin">Three</span></h1>

            </div>

        </div>

    </div>

4、书写css代码。

.large-header { position: relative; width: 100%; background: #333; overflow: hidden; background-size: cover; background-position: center center; z-index: 1; }

.demo-1 .large-header { background-image: url('../images/demo-1-bg.jpg'); }

.main-title { position: absolute; margin: 0; padding: 0; color: #f9f1e9; text-align: center; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

.demo-1 .main-title { text-transform: uppercase; font-size: 4.2em; letter-spacing: 0.1em; }

.main-title .thin { font-weight: 200; }

 @media only screen and (max-width : 768px) {

.demo-1 .main-title,  .demo-3 .main-title,  .demo-4 .main-title { font-size: 3em; }

.demo-2 .main-title { font-size: 4em; }

}

5、书写并添加js代码。

<script src="js/TweenLite.min.js"></script>

    <script src="js/EasePack.min.js"></script>

    <script>

(function() {

    var lastTime = 0;

    var vendors = ['ms', 'moz', 'webkit', 'o'];

    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];

        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']

            || window[vendors[x]+'CancelRequestAnimationFrame'];

    }

    if (!window.requestAnimationFrame)

        window.requestAnimationFrame = function(callback, element) {

            var currTime = new Date().getTime();

            var timeToCall = Math.max(0, 16 - (currTime - lastTime));

            var id = window.setTimeout(function() { callback(currTime + timeToCall); },

                timeToCall);

            lastTime = currTime + timeToCall;

            return id;

        };

    if (!window.cancelAnimationFrame)

        window.cancelAnimationFrame = function(id) {

            clearTimeout(id);

        };

}());

</script>

    <script src="js/demo-1.js"></script>

6、代码整体结构。

7、查看效果。