- 技术博客
- Canvas渐变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
body {
background: #2c3e50;
}
#leftTopCanvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="leftTopCanvas" width="900" height="400"></canvas>
<script>
function writeText(context, font, color, text, x, y) {
context.font = font;
context.fillStyle = color;
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(`${text}`, x, y);
}
function writeAnomaly(ctx, rectX, rectY, i, height) {
ctx.beginPath();
ctx.lineWidth = 2;
if (i === 4) {
ctx.strokeStyle = '#34FB7F';
ctx.fillStyle = '#00DA55';
} else {
ctx.strokeStyle = '#FBED00';
ctx.fillStyle = '#DA6D00';
}
rectX += i * 130;
rectY -= i * height;
ctx.moveTo(rectX, rectY);
ctx.lineTo(rectX + 25, rectY);
ctx.lineTo(rectX + 30, rectY - 6);
ctx.lineTo(rectX + 45, rectY - 6);
ctx.lineTo(rectX + 50, rectY);
ctx.lineTo(rectX + 90, rectY);
ctx.lineTo(rectX + 100, rectY + 10);
ctx.lineTo(rectX + 100, rectY + 60);
ctx.lineTo(rectX + 10, rectY + 60);
ctx.lineTo(rectX, rectY + 50);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function drawText(context, text, x, y, w) {
let chr = text.split("");
let temp = "";
let row = [];
context.font = "18px bold 黑体";
context.fillStyle = "#fff";
context.textBaseline = "middle";
for (let a = 0; a < chr.length; a++) {
if (context.measureText(temp).width < w && context.measureText(temp + (chr[a])).width <= w) {
temp += chr[a];
} else {
row.push(temp);
temp = chr[a];
}
}
row.push(temp);
for (let b = 0; b < 2; b++) {
let str = row[b];
if (b === 1 && str && row.length > 2) {
str = str.substring(0, str.length) + '...';
context.fillText(str, x, y + (b + 1) * 24);
} else if (str) {
context.fillText(str, x, y + (b + 1) * 24);
}
}
}
function drawLineChart() {
let myCanvas = document.getElementById('leftTopCanvas');
let ctx = myCanvas.getContext('2d');
let oX = 100, oY = 360, oHeight = 50;
ctx.beginPath();
ctx.strokeStyle = '#346C98';
ctx.lineWidth = 3;
ctx.moveTo(oX, 20);
ctx.lineTo(oX, oY);
ctx.lineTo(820, oY);
ctx.stroke();
let time = ['2006', '2008', '2012', '2017', '2018', '年'];
for (let i = 0; i < 6; i++) {
let x = 170, y = oY + 20;
x += i * 130;
writeText(ctx, "18px bold 黑体", '#fff', `${time[i]}`, x, y);
}
let num = ['(MW)', '11340', '9050', '5730', '1470', '0'];
for (let i = 0; i < 6; i++) {
let x = 70, y = 50;
y += i * (oY - 50) / 5;
writeText(ctx, "16px bold 黑体", '#fff', `${num[i]}`, x, y);
}
ctx.beginPath();
ctx.strokeStyle = '#00FFBD';
ctx.lineWidth = 3;
let x = oX + 5, y = oY - 5;
ctx.moveTo(x, y);
for (let i = 1; i <= 9; i++) {
i % 2 === 0 ? y -= oHeight : x += 130;
ctx.lineTo(x, y);
}
ctx.stroke();
for (let i = 0; i < 5; i++) {
writeAnomaly(ctx, 120, 286, i, oHeight)
}
let x0 = oX + 5;
let y0 = oY - 5;
let w = 130;
for (let i = 1; i < 5; i++) {
let myGradient = ctx.createLinearGradient(0, 0, 0, 300);
myGradient.addColorStop(0, "rgba(10, 74, 152, .51)");
myGradient.addColorStop(1, "rgba(1, 169, 255, 0)");
ctx.fillStyle = myGradient;
ctx.fillRect(x0 + w * i + 2, y0 - oHeight * i + 2, w, oHeight * i);
}
writeText(ctx, "18px bold 黑体", '#fff', '连续安全生产天数：', 190, 40);
let safetyTime = 4197;
writeText(ctx, "24px bold 黑体", '#fff300', `${safetyTime}`, 300, 40);
let textX = 170, textY = 280, strArr = ['省内首家大型集控', '龚铜接入', '瀑深接入', '大岗山，枕头坝接入', '猴子岩，沙南接入'];
for (let i = 0; i < 5; i++) {
drawText(ctx, `${strArr[i]}`, textX, textY, 90);
textX += 130;
textY -= oHeight
}
}
drawLineChart()
</script>
</body>
</html>
