let color = '#' + parseInt(Math.random() * 0xffffff).toString(16);
随机颜色统计图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="can" width="500" height="500"></canvas>
</body>
<script>
let canvas = document.querySelector('#can');
let ctx = canvas.getContext("2d");
ctx.beginPath();
drawLine(50, 50, 50, 450, 'blank', 1);
drawLine(50, 450, 450, 450, 'blank', 1);
for (let i = 0; i < 7; i++) {
// 随机高度
let h = Math.random() * 400 + 50;
// 随机颜色
let color = '#' + parseInt(Math.random() * 0xffffff).toString(16);
drawLine(100 + i * 50, h, 100 + i * 50, 450, color, 20);
}
function drawLine(x1, y1, x2, y2, color, width) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke()
ctx.closePath();
}
</script>
<style>
canvas {
margin: 0 auto;
border: 1px solid #cecece;
display: block;
}
</style>
</html>
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
