jquery实现canvas波浪线条波动动画效果代码-html代码-BFW代码库

jquery实现canvas波浪线条波动动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现canvas波浪线条波动动画效果代码

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

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, maximum-scale=1.0">
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:100,300);
	body {
	background-color:#222;
	background-image:url('data:image/svg+xml;
	base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjIyMjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTExMTExIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
	background-size:100%;
	background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#111),color-stop(50%,#222),color-stop(100%,#111));
	background-image:-moz-linear-gradient(top,#111 0,#222 50%,#111 100%);
	background-image:-webkit-linear-gradient(top,#111 0,#222 50%,#111 100%);
	background-image:linear-gradient(to bottom,#111 0,#222 50%,#111 100%);
	font-family:'Raleway',sans-serif;
	font-weight:100;
	color:rgba(255,255,255,0.5);
	height:100vh;
	width:100vw
}
#title {
	position:fixed;
	top:10px;
	left:10px;
	font-size:20px;
	letter-spacing:.1em;
	z-index:100
}

</style>
</head>

<body>

    <div id="title">Sine Wave Experiment</div><canvas id="waves" width="812" height="942" style="width: 650px; height: 754px;"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
    <script >
function SineWaveGenerator(a) {
    $.extend(this, a || {});
    if (!this.el) {
        throw "No Canvas Selected"
    }
    this.ctx = this.el.getContext("2d");
    if (!this.waves.length) {
        throw "No waves specified"
    }
    this._resizeWidth();
    window.addEventListener("resize", this._resizeWidth.bind(this));
    this.resizeEvent();
    window.addEventListener("resize", this.resizeEvent.bind(this));
    if (typeof this.initialize === "function") {
        this.initialize.call(this)
    }
    this.loop()
}
SineWaveGenerator.prototype.speed = 10;
SineWaveGenerator.prototype.amplitude = 50;
SineWaveGenerator.prototype.wavelength = 50;
SineWaveGenerator.prototype.segmentLength = 10;
SineWaveGenerator.prototype.lineWidth = 2;
SineWaveGenerator.prototype.strokeStyle = "rgba(255, 255, 255, 0.2)";
SineWaveGenerator.prototype.resizeEvent = function() {};
SineWaveGenerator.prototype._resizeWidth = function() {
    this.dpr = window.devicePixelRatio || 1;
    this.width = this.el.width = window.innerWidth * this.dpr;
    this.height = this.el.height = window.innerHeight * this.dpr;
    this.el.style.width = window.innerWidth + "px";
    this.el.style.height = window.innerHeight + "px";
    this.waveWidth = t.........完整代码请登录后点击上方下载按钮下载查看