canvas波浪动画效果代码-html代码-BFW代码库

canvas波浪动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas波浪动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * { margin: 0; padding: 0; }
canvas { display: block; }
</style>

</head>
<body>

  <script  >
      var Curves = (function() {
	'use strict';
	var raf_ID = 0;
	
	function Shape(points, color) {
		this.points = points;
		this.color = color;
	}
	
	Shape.prototype.render = function(ctx, width, height) {
		var self = this;
		ctx.save();
		ctx.lineWidth = 2;
		ctx.strokeStyle = '#fff';
		ctx.fillStyle = 'rgba(255, 255, 255, 0.16)';
		this.points.forEach(function(point, i) {
			ctx.beginPath();
			ctx.font = '14px Arial';
			ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
			ctx.closePath();
			ctx.fill();
		});
		ctx.fillStyle = this.color;
		ctx.beginPath();
		ctx.moveTo(this.points[0].x, this.points[0].y);
		this.points.forEach(function(point, i) {
			point.y = point.oldY + Math.sin(point.angle) * 35;
			point.angle += point.speed;
			var nextPoint = self.points[i + 1];
			if (nextPoint) {
				var ctrlPoint = {
					x: (point.x + nextPoint.x) / 2,
					y: (point.y + nextPoint.y) / 2
				}; 
				ctx.quadraticCurveTo(point.x, point.y, ctrlPoint.x, ctrlPoint.y);
			}
		});
		ctx.lineTo(width, height);
		ctx.lineTo(0, height);
		ctx.fill();
		
		ctx.restore();
	};

	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	
	var width = window.innerWidth;
	var height = window.innerHeight;
		
	var colors = [
		'#e67e22', '#d35400', '#e74c3c', '#c0392b', '#f39c12', '#d35400'
	];
	var position = { x: 0, y: height / 2 };
	var shapes = generateShapes(6, height / 2, width / 20.........完整代码请登录后点击上方下载按钮下载查看