前端开发者| web前端开发主要是怎么学 |
| 前端的开发文档怎么写 |
| 前端开发怎么找项目 |
使用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 * 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
评论前必须登录！
注册