h5 canvas  动态背景缩略图
h5 canvas  动态背景插图
<div class="robot-panel">
					<div class="robot-head">
						<div class="robot-info">
							<img src="images/USDT@2x.png" ><span>USDT</span>
						</div>
						<a href="javascript:void(0);" class="weui-btn weui-btn_warn ">暂停</a>
					</div>
					<div class="robot-body">
						<div class="robot-data-flex">
							<div class="col">
								<div class="val">2.50</div>
								<div class="text">委托金额</div>
							</div>
							<div class="col">
								<div class="val text-green">1.7938473</div>
								<div class="text">交易收益</div>
							</div>
							<div class="col">
								<div class="val text-green">40%</div>
								<div class="text">预期月收益</div>
							</div>
						</div>
						<div class="robot-progress">
							<div class="weui-progress">
								<div class="weui-progress__bar">
									<div class="weui-progress__inner-bar js_progress" style="width: 50%;"></div>
								</div>
							</div>
						</div>
						<div class="robot-data-flex sm">
							<div class="col">
								<div class="val">12-09 08:51晚上</div>
								<div class="text">创建时间</div>
							</div>
							<div class="col">
								<div class="val">1天</div>
								<div class="text">委托周期</div>
							</div>
							<div class="col">
								<div class="val">12-10 08:51晚上</div>
								<div class="text">结束时间</div>
							</div>
						</div>
					</div>
					<!-- 收缩 -->
					<div class="robot-collapse">
						<div class="robot-list-cell">
							<div class="ro-logo"><img src="images/sol.png" ></div>
							<div class="flex_bd">
								<div class="ro-title">sol</div>
								<div class="ro-time">2021-04-05 15:14:26</div>
							</div>
							<div class="ro-echart"></div>
							<div class="ro-data">
								<div class="val text-red">-5.868</div>
								<div class="text">收益</div>
							</div>
							<div class="iconfont icon-arr_down"></div>
						</div>
						<div class="robot-list-cell">
							<div class="ro-logo"><img src="images/ont.png" ></div>
							<div class="flex_bd">
								<div class="ro-title">ont </div>
								<div class="ro-time">2021-04-05 15:14:26</div>
							</div>
							<div class="ro-echart"></div>
							<div class="ro-data">
								<div class="val text-red">-5.868</div>
								<div class="text">收益</div>
							</div>
							<div class="iconfont icon-arr_up"></div>
						</div>
						<div class="robot-list-cell">
							<div class="ro-logo"><img src="images/jst.png" ></div>
							<div class="flex_bd">
								<div class="ro-title">jst</div>
								<div class="ro-time">2021-04-05 15:14:26</div>
							</div>
							<div class="ro-echart"></div>
							<div class="ro-data">
								<div class="val text-green">-5.868</div>
								<div class="text">收益</div>
							</div>
							<div class="iconfont icon-arr_up"></div>
						</div>
						<div class="robot-list-cell">
							<div class="ro-logo"><img src="images/doge.png" ></div>
							<div class="flex_bd">
								<div class="ro-title">doge </div>
								<div class="ro-time">2021-04-05 15:14:26</div>
							</div>
							<div class="ro-echart"></div>
							<div class="ro-data">
								<div class="val text-green">5.868</div>
								<div class="text">收益</div>
							</div>
							<div class="iconfont icon-arr_up"></div>
						</div>
						<div class="robot-list-cell">
							<div class="ro-logo"><img src="images/xrp@2x.png" ></div>
							<div class="flex_bd">
								<div class="ro-title">xrp </div>
								<div class="ro-time">2021-04-05 15:14:26</div>
							</div>
							<div class="ro-echart"></div>
							<div class="ro-data">
								<div class="val text-green">1.868</div>
								<div class="text">收益</div>
							</div>
							<div class="iconfont icon-arr_up"></div>
						</div>
					</div>
					<div class="robot-ft">
						<span class="iconfont icon-dn robot-more"></span>
					</div>
					<div class="panel-canvas"><canvas id="myCanvas3" width="100%" height="100%"></canvas></div>
				</div>
for (var i = 1; i < 10; i++) {
	let canvas = document.getElementById("myCanvas"+i),
	ctx = canvas.getContext("2d"),
	width = (canvas.width = window.innerWidth),
	height = (canvas.height = window.innerHeight),
	centerY = height / 2,
	segNum = 130,
	lineWidth = centerY,
	lineNum = 100;
	drawContent();
	function drawContent() {
	  ctx.clearRect(0, 0, width, height);
	  let time = Date.now() / 3000;
	  for (var j = 0; j < lineNum; j++) {
	    ctx.beginPath();
	    ctx.lineWidth = 0.9;
	    ctx.strokeStyle = "#36333b";
	    for (var i = 0; i < segNum; i++) {
	      const x = (i / (segNum - 1)) * width;
	      const px = i / 50;
	      const py = j / 55 + time;
	      const y = lineWidth * noise.perlin2(px, py) + centerY;
	      if (i === 0) {
	        ctx.moveTo(x, y);
	      } else {
	        ctx.lineTo(x, y);
	      }
	    }
	    ctx.stroke();
	  }
	  requestAnimationFrame(drawContent);
	}
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注