找回密码
当前位置：前端开发者 > React > 正文

前端开发canvas仿支付宝，我的健康页面

2019-02-20 20:00:00 分类：React 阅读(91) 评论(0)
web前端开发主要是怎么学
前端的开发文档怎么写
前端开发怎么找项目

使用canvas实现，支付宝–“我的健康”页面

html 代码

<!DOCTYPE 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 * 0.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>
毕业设计怎么开发web前端
前端开发怎么数据模拟
怎么知道前端开发语言
» 本文来自：前端开发者 » 《前端开发canvas仿支付宝，我的健康页面》
» 本文链接地址：https://www.rokub.com/8122.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论