Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | /**
* @description 浪花绘制
* @author SoldierAb
* @since 18-12-25
* @class Wave
*/
class Wave {
constructor({
canvasWidth, // 轴长
canvasHeight, // 轴高
waveWidth = 0.055, // 波浪宽度,数越小越宽
waveHeight = 6, // 波浪高度,数越大越高
xOffset = 0,
speed = 0.04,
colors = ['#DBB77A', '#BF8F3B'], // 波浪颜色
} = {}) {
this.points = [];
this.startX = 0;
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.waveWidth = waveWidth;
this.waveHeight = waveHeight;
this.xOffset = xOffset;
this.speed = speed;
this.colors = colors;
}
getChartColor(ctx) {
const radius = this.canvasWidth / 2;
const grd = ctx.createLinearGradient(radius, radius, radius, this.canvasHeight);
grd.addColorStop(0, this.colors[0]);
grd.addColorStop(1, this.colors[1]);
return grd;
}
draw(ctx) {
ctx.save();
const points = this.points;
ctx.beginPath();
for (let i = 0; i < points.length; i += 1) {
const point = points[i];
ctx.lineTo(point[0], point[1]);
}
ctx.lineTo(this.canvasWidth, this.canvasHeight);
ctx.lineTo(this.startX, this.canvasHeight);
ctx.lineTo(points[0][0], points[0][1]);
ctx.fillStyle = this.getChartColor(ctx);
ctx.fill();
ctx.restore();
}
update({
nowRange,
} = {}) {
this.points = [];
const {
startX,
waveHeight,
waveWidth,
canvasWidth,
canvasHeight,
xOffset,
} = this;
for (let x = startX; x < startX + canvasWidth; x += 20 / canvasWidth) {
const y = Math.sin(((startX + x) * waveWidth) + xOffset);
const dY = canvasHeight * (1 - (nowRange / 100));
this.points.push([x, dY + (y * waveHeight)]);
}
this.xOffset += this.speed;
}
}
export default Wave; |