使用 canvas 实现, 支付宝 --"我的健康" 页面
我问题大家评论区见
原页面截图在下方, 大家可以对比看看.
html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title > 我的健康 </title>
- <style type="text/CSS">
- center {
- width: 750px;
- height: 1334px;
- position: relative;
- margin: auto;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- /* 作者: 592667917*/
- background: -webkit-linear-gradient(left, #face4b, #faa731);
- background: -o-linear-gradient(right, #face4b, #faa731);
- background: -moz-linear-gradient(right, #face4b, #faa731);
- background: linear-gradient(to right, #face4b, #faa731);
- }
- </style>
- </head>
- <body>
- <center>
- <canvas id="canvas"> 您的浏览器不支持 HTML5 canvas 标签 </canvas>
- </center>
- <script>
- var canvas = document.getElementById('canvas');
- var ctx = canvas.getContext('2d');
- var mW = canvas.width = 750;
- var mH = canvas.height = 1334;
- var sX = 0;
- var sY = mH / 2;
- var axisLength = mW;
- var waveWidth = 0.016 ;
- var waveHeight = 30;
- var speed = 0.04;
- var xOffset = 0;
- var drawSin = function(xOffset){
- ctx.fillStyle = "rgba(114,216,248, 0.9)";
- var points=[];
- ctx.beginPath();
- for(var x = sX; x <sX + axisLength; x += 20 / axisLength){
- var y = -Math.sin((sX + x) * waveWidth + xOffset);
- points.push([x, sY + y * waveHeight]);
- ctx.lineTo(x, sY + y * waveHeight);
- }
- ctx.lineTo(axisLength, mH);
- ctx.lineTo(sX, mH);
- // 作者: 592667917
- ctx.lineTo(points[0][0],points[0][1]);
- ctx.fill();
- ctx.restore();
- };
- var drawCos = function(xOffset){
- ctx.fillStyle = "rgba(244,68,109, 0.9)";
- var points=[];
- // 作者: 592667917
- ctx.beginPath();
- for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
- var y = -Math.cos((sX + x) * waveWidth + xOffset);
- points.push([x, sY + y * waveHeight]);
- ctx.lineTo(x, sY + y * waveHeight);
- }
- ctx.lineTo(axisLength, mH);
- ctx.lineTo(sX, mH);// 作者: 592667917
- ctx.lineTo(points[0][0],points[0][1]);
- ctx.fill();
- ctx.restore();
- };
- drawSin();
- drawCos();
- var render = function(){
- ctx.clearRect(0, 0, mW, mH);
- drawCos(xOffset*.5);
- drawSin(xOffset);
- xOffset -= speed;
- requestAnimationFrame(render);
- ctx.fillStyle = "rgba(255,255,255, 1)";
- ctx.font="30px Arial";
- ctx.fillText("健康保障金额",288,214);
- ctx.font="40px Arial";
- ctx.fillText("",200,330);
- // 作者: 592667917
- ctx.font="120px Arial";
- ctx.fillText("5000",246,350);
- }
- render()
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16120/add996ab88f147f0dd9e74215a95e889.html