正弦波编辑器

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed");
body {
  background-color: #483684;
  color: #f1ff22;
  font-family: 'Ubuntu Condensed', sans-serif;
  margin: 0;
  overflow: hidden;
  font-weight: bold;
}

.controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 550px;
  margin: 0 auto;
  margin-top: 100px;
}

.control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 170px;
  text-align: center;
}

/***** RANGE CUSTOMIZATION *****

via http://danielstern.ca/range.css/?ref=css-tricks#/

*******/
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 8.9px 0;
  margin-top: 20px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2.2px;
  cursor: pointer;
  -webkit-box-shadow: 2.7px 2.7px 0 rgba(0, 0, 0, 0.07), 0 0 2.7px rgba(13, 13, 13, 0.07);
          box-shadow: 2.7px 2.7px 0 rgba(0, 0, 0, 0.07), 0 0 2.7px rgba(13, 13, 13, 0.07);
  background: #f1ff22;
  border-radius: 2.3px;
  border: 0 solid #f1ff22;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0 #291d53, 0 0 0 #523d96;
          box-shadow: 0 0 0 #291d53, 0 0 0 #523d96;
  border: 3px solid #291d53;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background: #f1ff22;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8.9px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #f2ff2c;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 2.2px;
  cursor: pointer;
  box-shadow: 2.7px 2.7px 0 rgba(0, 0, 0, 0.07), 0 0 2.7px rgba(13, 13, 13, 0.07);
  background: #f1ff22;
  border-radius: 2.3px;
  border: 0 solid #f1ff22;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 #291d53, 0 0 0 #523d96;
  border: 3px solid #291d53;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background: #f1ff22;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 2.2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #f0ff18;
  border: 0 solid #f1ff22;
  border-radius: 4.6px;
  box-shadow: 2.7px 2.7px 0 rgba(0, 0, 0, 0.07), 0 0 2.7px rgba(13, 13, 13, 0.07);
}

input[type=range]::-ms-fill-upper {
  background: #f1ff22;
  border: 0 solid #f1ff22;
  border-radius: 4.6px;
  box-shadow: 2.7px 2.7px 0 rgba(0, 0, 0, 0.07), 0 0 2.7px rgba(13, 13, 13, 0.07);
}

input[type=range]::-ms-thumb {
  box-shadow: 0 0 0 #291d53, 0 0 0 #523d96;
  border: 3px solid #291d53;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background: #f1ff22;
  cursor: pointer;
  height: 2.2px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #f1ff22;
}

input[type=range]:focus::-ms-fill-upper {
  background: #f2ff2c;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #f2ff2c;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 2.2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #f0ff18;
  border: 0 solid #f1ff22;
  border-radius: 4.6px;
  box-shadow: 2.7px 2.7px 0 rgba(0, 0, 0, 0.07), 0 0 2.7px rgba(13, 13, 13, 0.07);
}

input[type=range]::-ms-fill-upper {
  background: #f1ff22;
  border: 0 solid #f1ff22;
  border-radius: 4.6px;
  box-shadow: 2.7px 2.7px 0 rgba(0, 0, 0, 0.07), 0 0 2.7px rgba(13, 13, 13, 0.07);
}

input[type=range]:focus::-ms-fill-lower {
  background: #f1ff22;
}

input[type=range]:focus::-ms-fill-upper {
  background: #f2ff2c;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var amplitudeRange = document.getElementById('amplitude');
var waveLegthRange = document.getElementById('wavelength');
var frequencyRange = document.getElementById('frequency');

var posX = 0;
var posY = 0;
var diffX = 0;

updateCanvas();

var amplitude = Number(amplitudeRange.value);
var frames = 0;
var frequency = Number(frequencyRange.value);
var wavelength = Number(waveLegthRange.value);

amplitudeRange.addEventListener('change', function (evt) {
  amplitude = Number(evt.currentTarget.value);
});

waveLegthRange.addEventListener('change', function (evt) {
  wavelength = Number(evt.currentTarget.value);
});

frequencyRange.addEventListener('change', function (evt) {
  frequency = Number(evt.currentTarget.value);
});

animate();

window.addEventListener('resize', onResize);

function updateCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight / 2;
  diffX = canvas.width / 2.5;

posX = canvas.width * .5;
  posY = canvas.height * .5;

ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = '#f1ff22';
  ctx.lineWidth = 1;
  ctx.moveTo(posX, posY);
}

function drawCircle(x, y, ctx) {
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
  ctx.fillStyle = ctx.strokeStyle;
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.stroke();
}

function calcPosY(x) {
  return Math.sin((x / wavelength * (Math.PI * 2)) + frames / frequency) * amplitude;
}

function animate() {
  frames++

ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.lineWidth = 1;

for (var x = posX - diffX; x < canvas.width / 2 + diffX; x++) {
    var y = calcPosY(x);
    ctx.lineTo(x, y + posY);
  }

ctx.stroke();

for (var cx = posX - diffX; cx < canvas.width / 2 + diffX; cx += 15) {
    var y1 = calcPosY(cx);
    drawCircle(cx, y1 + posY - 40, ctx);
  }

requestAnimationFrame(animate.bind(this));
}

function onResize() {
  updateCanvas();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg