画出艺术色块填充画布

2023-11-18 00:56:38

实现色块填充画布的步骤：

首先，我们需要创建一个Canvas元素。这可以通过在HTML代码中添加<canvas>标签来实现。
接下来的步骤是设置Canvas的大小。这可以通过使用Canvas元素的width和height属性来实现。
接下来，我们需要创建一个JavaScript文件并将其链接到HTML文件中。
在JavaScript文件中，我们需要创建一个Canvas的上下文对象。这可以通过使用getContext()方法来实现。
现在，我们需要创建一个包含200种十六进制颜色的数组。这些颜色可以从网上找到，也可以自己创建。
接下来的步骤是创建一个函数来生成色块。这个函数应该接受三个参数：色块的大小、位置和颜色。
在函数中，我们需要使用fillRect()方法来绘制色块。fillRect()方法接受四个参数：色块的x坐标、y坐标、宽度和高度。
接下来，我们需要使用一个循环来生成多个色块。这个循环可以根据需要生成任意数量的色块。
最后，我们需要调用render()方法来将色块渲染到Canvas上。

以下是实现色块填充画布的示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const colors = [
  '#FF0000',
  '#FF8000',
  '#FFFF00',
  '#80FF00',
  '#00FF00',
  '#00FF80',
  '#00FFFF',
  '#0080FF',
  '#0000FF',
  '#8000FF',
  '#FF00FF',
  '#FF0080'
];

function createBlock(size, position, color) {
  ctx.fillStyle = color;
  ctx.fillRect(position.x, position.y, size, size);
}

for (let i = 0; i < 200; i++) {
  const size = Math.random() * 50 + 10;
  const position = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height
  };
  const color = colors[Math.floor(Math.random() * colors.length)];

  createBlock(size, position, color);
}

ctx.render();