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 sp.........完整代码请登录后点击上方下载按钮下载查看