GIF 2023-10-30 18-46-11.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
div {
padding: 16px;
width: 400px;
height: 160px;
background-color: #fff;
border-radius: 6px;
margin: 20px;
position: relative;
}
canvas {
position: absolute;
left: 16px;
top: 16px;
}
</style>
</head>
<body>
<div>
<canvas id="c1" width="400" height="160"></canvas>
<canvas id="c2" width="400" height="160"></canvas>
</div>
</body>
<script>
let sd = [100, 180, 170, 60, 100, 100,100, 100, 100, 160, 80, 120, 100, 100, 100, 100, 100, 100, 100, 100]
/** 畫(huà)線(xiàn) */
let data = []
function drawLine(ctx, shadow) {
/** 開(kāi)始x坐標(biāo)、開(kāi)始y坐標(biāo)眯娱、結(jié)束x坐標(biāo)、結(jié)束y坐標(biāo) */
let grd = ctx.createLinearGradient(0, 100, 400, 100)
grd.addColorStop(0, `rgba(14, 185, 160, ${shadow ? 0.1 : 1})`)
grd.addColorStop(1, `rgba(160, 209, 118, ${shadow ? 0.1 : 1})`)
// 將漸變賦值給線(xiàn)的樣式
ctx.strokeStyle = grd
// 高大約170+
let pyX = shadow ? 6 : 0
ctx.beginPath()
let newData = data.map(item => {
return 160 - (item / 200) * 140
})
// console.log(newData)
// console.log('***********')
// ctx.moveTo(0, endPoint)
newData.forEach((item, index) => {
let x = index * 4
ctx.lineTo(x, item + pyX)
})
ctx.lineWidth = shadow ? 5 : 2
ctx.stroke()
}
function drwaBg(ctx) {
/*1.繪制網(wǎng)格*/
/*2.網(wǎng)格的大小*/
var lineNumber = 6
var canvasHeight = ctx.canvas.height - lineNumber
var canvasWidth = ctx.canvas.width
console.log(canvasWidth, canvasHeight)
for (var i = 0; i < 6; i++) {
let endPoint = i * 28 + 10.5
ctx.beginPath()
ctx.moveTo(0, endPoint)
ctx.lineTo(canvasWidth, endPoint)
ctx.strokeStyle = '#ddd'
ctx.lineWidth = 1
ctx.stroke()
}
}
let c1 = document.querySelector('#c1')
let ctx1 = c1.getContext('2d')
drwaBg(ctx1)
let c2 = document.querySelector('#c2')
let ctx2 = c2.getContext('2d')
let stop = 0
let index = 0
function loop() {
if(data.length>= 100) {
data.shift()
}
data.push(sd[index])
index++
if(index>20) {
index = 0
}
// console.log('-----------')
// console.log(data)
ctx2.clearRect(0, 0, 1000, 1000)
drawLine(ctx2)
drawLine(ctx2, true)
window.requestAnimationFrame(() => {
if(stop < 5000){
loop()
}
stop ++
})
}
loop()
</script>
</html>
