canvas实现可拖拽的螺旋线动画效果代码-html代码-BFW代码库

canvas实现可拖拽的螺旋线动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现可拖拽的螺旋线动画效果代码

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, user-scalable=no">
	</head>
	<body>

		<canvas></canvas>
		<span>drag to rotate</span>

		<style type="text/css" media="screen">
			body {
				padding: 0;
				margin: 0;
				font-family: Helvetica, sans-serif;

				display: flex;
				height: 100vh;
				background-color: #111;
			}

			canvas {
				margin: auto;
			}

			span {
				color: #777;
				position: absolute;
				top: 20px;
				left: 20px;
				user-select: none;
			}
		</style>

		<script>
			var canvas = document.querySelector( 'canvas' );
			var context = canvas.getContext( '2d' );

			var time = 0,
				velocity = 0.1,
				velocityTarget = 0.1,
				width,
				height,
				lastX,
				lastY;

			var MAX_OFFSET = 400;
			var SPACING = 4;
			var POINTS = MAX_OFFSET / SPACING;
			var PEAK = MAX_OFFSET * 0.25;
			var POINTS_PER_LAP = 6;
			var SHADOW_STRENGTH = 6;

			setup();

			function setup() {

				resize();
				step();

				window.addEventListener( 'resize', resize );
				window.addEventListener( 'mousedown', onMouseDown );
				document.addEventListener( 'touchstart', onTouchStart );

			}

			function resize() {

				width = canvas.width = window.innerWidth;
				height = canvas.height = window.innerHeight;

			}

			function step() {

				time += velocity;
				velocity += ( velocityTarget - velocity ) * 0.3;

				clear();
				render();

				requestAnimationFrame( step );

			}

			function clear() {

				context.clearRect( 0, 0, width, height );

			}

			function render() {

				var x, y,
					cx = width/2,
					cy = height/2;

				context.globalCompositeOperation = 'lighter';
				context.strokeStyle = '#fff';
				context.shadowColor = '#fff';
				context.lineWidth = 2;
				context.beginPath();

				for( var i = POINTS; i > 0; i -- ) {

					var value = i * SPACING + ( time % SPACING );

					var ax = Math.sin( value/POINTS_PER_LAP ) * Math.PI,
						ay = Mat.........完整代码请登录后点击上方下载按钮下载查看