随机画面 - Javascript

在Web开发中，我们经常需要使用随机生成的图片展示，例如随机展示产品图片、用户头像等。这时候，我们就需要用到JavaScript生成随机画面了。

以下是生成随机画面的JavaScript代码片段：

// 设置画面大小
const canvas = document.getElementById("random-canvas");
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;

// 生成随机色
function getRandomColor() {
  const color = Math.floor(Math.random() * 16777215).toString(16);
  return "#" + ("000000" + color).slice(-6);
}

// 生成随机线条
function drawRandomLine() {
  const startX = Math.floor(Math.random() * 400);
  const startY = Math.floor(Math.random() * 400);
  const endX = Math.floor(Math.random() * 400);
  const endY = Math.floor(Math.random() * 400);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = getRandomColor();
  ctx.stroke();
}

// 生成随机圆形
function drawRandomCircle() {
  const centerX = Math.floor(Math.random() * 400);
  const centerY = Math.floor(Math.random() * 400);
  const radius = Math.floor(Math.random() * 100);
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.fillStyle = getRandomColor();
  ctx.fill();
}

// 生成随机（线条或圆形）
function drawRandomShape() {
  if (Math.random() < 0.5) {
    drawRandomLine();
  } else {
    drawRandomCircle();
  }
}

// 生成多个随机形状
function drawRandomImage() {
  const shapesNum = Math.floor(Math.random() * 20);
  for (let i = 0; i < shapesNum; i++) {
    drawRandomShape();
  }
}

drawRandomImage();

代码解释：

1. 首先，我们需要设置画面大小，创建一个canvas元素，获取它的2D上下文对象ctx，并设置画面的宽度和高度。
2. 然后，我们需要定义getRandomColor函数，用于生成随机颜色，它会返回一个6位的十六进制字符串。
3. 接着，我们定义drawRandomLine函数和drawRandomCircle函数，分别用于生成随机线条和随机圆形，在绘制时设置随机的起点、终点、颜色等信息。
4. 我们再定义一个drawRandomShape函数，用于随机生成线条或圆形，它会通过Math.random()方法返回一个0~1的随机数来确定绘制哪种形状。
5. 最后，我们定义drawRandomImage函数，用于生成多个随机形状，通过Math.floor(Math.random() * 20)生成随机的形状数量，然后循环调用drawRandomShape函数来一个个绘制形状。

使用该代码片段，我们可以在指定的canvas画布上随机生成不同的图案，既有线条也有圆形，每次刷新都会得到完全不同的画面。

Markdown片段

## 随机画面 - Javascript

在Web开发中，我们经常需要使用随机生成的图片展示，例如随机展示产品图片、用户头像等。这时候，我们就需要用到JavaScript生成随机画面了。

以下是生成随机画面的JavaScript代码片段：

```javascript
// 设置画面大小
const canvas = document.getElementById("random-canvas");
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;

// 生成随机色
function getRandomColor() {
  const color = Math.floor(Math.random() * 16777215).toString(16);
  return "#" + ("000000" + color).slice(-6);
}

// 生成随机线条
function drawRandomLine() {
  const startX = Math.floor(Math.random() * 400);
  const startY = Math.floor(Math.random() * 400);
  const endX = Math.floor(Math.random() * 400);
  const endY = Math.floor(Math.random() * 400);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = getRandomColor();
  ctx.stroke();
}

// 生成随机圆形
function drawRandomCircle() {
  const centerX = Math.floor(Math.random() * 400);
  const centerY = Math.floor(Math.random() * 400);
  const radius = Math.floor(Math.random() * 100);
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.fillStyle = getRandomColor();
  ctx.fill();
}

// 生成随机（线条或圆形）
function drawRandomShape() {
  if (Math.random() < 0.5) {
    drawRandomLine();
  } else {
    drawRandomCircle();
  }
}

// 生成多个随机形状
function drawRandomImage() {
  const shapesNum = Math.floor(Math.random() * 20);
  for (let i = 0; i < shapesNum; i++) {
    drawRandomShape();
  }
}

drawRandomImage();

代码解释：

1. 首先，我们需要设置画面大小，创建一个canvas元素，获取它的2D上下文对象ctx，并设置画面的宽度和高度。
2. 然后，我们需要定义getRandomColor函数，用于生成随机颜色，它会返回一个6位的十六进制字符串。
3. 接着，我们定义drawRandomLine函数和drawRandomCircle函数，分别用于生成随机线条和随机圆形，在绘制时设置随机的起点、终点、颜色等信息。
4. 我们再定义一个drawRandomShape函数，用于随机生成线条或圆形，它会通过Math.random()方法返回一个0~1的随机数来确定绘制哪种形状。
5. 最后，我们定义drawRandomImage函数，用于生成多个随机形状，通过Math.floor(Math.random() * 20)生成随机的形状数量，然后循环调用drawRandomShape函数来一个个绘制形状。

使用该代码片段，我们可以在指定的canvas画布上随机生成不同的图案，既有线条也有圆形，每次刷新都会得到完全不同的画面。