js实现canvas鼠标移动绘制优美曲线动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现canvas鼠标移动绘制优美曲线动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <style type="text/css">
        * {
        	margin: 0; 
        	padding: 0;
        	-webkit-box-sizing: border-box;
        	-moz-box-sizing: border-box;
        	-ms-box-sizing: border-box;
        	-o-box-sizing: border-box;
        	box-sizing: border-box;
        }
        html, body {
        	margin: 0;
        	padding: 0;
        	font: 16px/1.4 'Lato', sans-serif;
        	color: #fefeff;
        	-webkit-font-smoothing: antialiased;
        	font-smoothing: antialiased;
        }
        body {
        	background: rgb(8,5,16);
        	overflow:hidden;
        	-webkit-touch-callout: none;
        	-webkit-user-select: none;
        	-khtml-user-select: none;
        	-moz-user-select: none;
        	-ms-user-select: none;
        	user-select: none;
        }
        
        h1 {
        	font: 2.75em 'Cinzel', serif;
        	font-weight: 400;
        	letter-spacing: 0.35em;
        	text-shadow: 0 0 25px rgba(254,254,255,0.85);
        }
        h2 {
        	font: 1.45em 'Cinzel', serif;
        	font-weight: 400;
        	letter-spacing: 0.5em;
        	text-shadow: 0 0 25px rgba(254,254,255,0.85);
        	text-transform: lowercase;
        }
        
        [class^="letter"] {
        	-webkit-transition: opacity 3s ease;
        	-moz-transition: opacity 3s ease;
        	transition: opacity 3s ease;
        }
        .letter-0  { transition-delay: 0.2s; }
        .letter-1  { transition-delay: 0.4s; }
        .letter-2  { transition-delay: 0.6s; }
        .letter-3  { transition-delay: 0.8s; }
        .letter-4  { transition-delay: 1.0s; }
        .letter-5  { transition-delay: 1.2s; }
        .letter-6  { transition-delay: 1.4s; }
        .letter-7  { transition-delay: 1.6s; }
        .letter-8  { transition-delay: 1.8s; }
        .letter-9  { transition-delay: 2.0s; }
        .letter-10 { transition-delay: 2.2s; }
        .letter-11 { transition-delay: 2.4s; }
        .letter-12 { transition-delay: 2.6s; }
        .letter-13 { transition-delay: 2.8s; }
        .letter-14 { transition-delay: 3.0s; }
        
        h1, h2 {
        	visibility: hidden;
        	-webkit-transform: translate3d(0, 0, 0);
        	-moz-transform: translate3d(0, 0, 0);
        	transform: translate3d(0, 0, 0);
        }	
        h1.transition-in,
        h2.transition-in {
        	visibility: visible;
        }
        h1 [class^="letter"], 
        h2 [class^="letter"] {
        	opacity: 0;
        }
        h1.transition-in [class^="letter"],
        h2.transition-in [class^="letter"] {
        	opacity: 1;
        }
        
        #container {
        display: table;
        position: absolute;
        z-index: 20;
        width: 100%;
        height: 100%;
        text-align: center;
        cursor: none;
        left: 15px;
        }
        #container > div {
        	display: table-cell;
        	vertical-align: middle;
        }
        #container p {
        	position: absolute;
        	width: 100%;
        	left: 0;
        	bottom: 25px;
        	font-size: 0.8em;
        	letter-spacing: 0.1em;
        	font-weight: 300;
        	color: #76747a;
        	-webkit-font-smoothing: subpixel-antialiased;
        	font-smoothing: subpixel-antialiased; 
        }
        #container p strong {
        color: #b3abc5;
        font-size: 5em;
        }
        #container p span {
        	font-size: 0.75em;
        	padding: 0 2px;
        }
        
        #canvas {
        	position: absolute;
        	z-index: 10;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	cursor: none;
        }
        
        #stats { 
        	position: absolute; 
        	z-index: 10; 
        	left: 10px; 
        	top: 10px; 
        }
        
        .dg.ac {
        	z-index: 100 !important;
        }
        
        #container div p strong a {
        color: #999;
        font-size: 0.5em;
        }
        body,td,th {
        font-family: Lato, sans-serif;
        }
        a:link {
        text-decoration: none;
        }
        a:visited {
        text-decoration: none;
        }
        a:hover {
        text-decoration: none;
        }
        a:active {
        text-decoration: none;
        }
    </style>
</head>

<body>

    <canvas id="canvas"></canvas>

    <script>
        ;(function(window) {
        
        var ctx,
        	hue,
        	logo,
        	form,
        	buffer,
        	target = {},
        	tendrils = [],
        	settings = {};
        
        settings.debug = true;
        settings.friction = 0.5;
        settings.trails = 20;
        settings.size = 50;
        settings.dampening = 0.25;
        settings.tension = 0.98;
        
        Math.TWO_PI = Math.PI * 2;
        
        // ========================================================================================
        // Oscillator
        // ----------------------------------------------------------------------------------------
        
        function Oscillator(options) {
        	this.init(options || {});
        }
        
        Oscillator.prototype = (function() {
        	
        	var value = 0;
        	
        	return {
        		
        		init: function(options) {
        			this.phase = options.phase || 0;
        			this.offset = options.offset || 0;
        			this.frequency = options.frequency || 0.001;
        			this.amplitude = options.amplitude || 1;
        		},
        		
        		update: function() {
        			this.phase += this.frequency;
        			value = this.offset + Math.sin(this.phase) * this.amplitude;
        			return value;
        		},
        		
        		value: function() {
        			return value;
        		}
        	};
        		
        })();
        
        // ========================================================================================
        // Tendril
        // ----------------------------------------------------------------------------------------
        
        function Tendril(options) {
        	this.init(options || {});
        }
        
        Tendril.prototype = (function() {
        	
        	function Node() {
        		this.x = 0;
        		this.y = 0;
        		this.vy = 0;
        		this.vx = 0;
        	}
        	
        	return {
        	
        		init: function(options) {
        			
        			this.spring = options.spring + (Math.random() * 0.1) - 0.05; 
        			this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
        			this.nodes = [];
        			
        			for(var i = 0, node; i < settings.size; i++) {
        		
        				node = new Node();
        				node.x = target.x;
        				node.y = target.y;
        		
        				this.nodes.push(node);
        			}	
        		},
        		
        		update: function() {
        			
        			var spring = this.spring,
        				node = this.nodes[0];
        			
        	.........完整代码请登录后点击上方下载按钮下载查看