JavaScript+html5 canvas制作色彩斑斓的正方形效果

JavaScript+HTML5 Canvas制作色彩斑斓的正方形效果，通常可以通过以下步骤实现：

创建canvas元素，并设置画布大小。

<canvas id="myCanvas" width="500" height="500"></canvas>

获取canvas元素和绘图上下文'2d'。

const canvas = document.querySelector('#myCanvas');
const ctx = canvas.getContext('2d');

创建一个函数来绘制正方形。

function drawSquare(x, y, size, r, g, b){
  ctx.fillStyle = `rgb(${r}, ${g}, ${b})`; // 设置填充颜色
  ctx.fillRect(x, y, size, size); // 绘制矩形
}

函数参数x，y是矩形左上角的坐标，size是矩形的大小，而r、g、b指定了填充颜色。

创建一个循环来绘制一系列的正方形。

for(let i = 0; i < canvas.width; i += 20){
  for(let j = 0; j < canvas.height; j += 20){
    drawSquare(i, j, 18, Math.random() * 255, Math.random() * 255, Math.random() * 255); // 绘制大小为18的矩形
  }
}

这里for循环中的两个变量i和j表示正方形在x轴和y轴的坐标位置。每次循环会生成一个随机的填充颜色，然后用drawSquare函数绘制正方形。

最后将完整代码映射到HTML页面中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Colorful Squares</title>
</head>
<body>
  <h1>Colorful Squares</h1>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.querySelector('#myCanvas');
    const ctx = canvas.getContext('2d');

    function drawSquare(x, y, size, r, g, b){
      ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
      ctx.fillRect(x, y, size, size);
    }

    for(let i = 0; i < canvas.width; i += 20){
      for(let j = 0; j < canvas.height; j += 20){
        drawSquare(i, j, 18, Math.random() * 255, Math.random() * 255, Math.random() * 255);
      }
    }
  </script>
</body>
</html>

这段代码会在页面上生成一个带有彩色正方形的画布。

示例一：

下面是一些自定义的参数，在这个示例中，我们能看到，绘图的每个小正方形位置不同，而且它们的大小也不一样。颜色参数也使用了不同的色调。

for(let i = 0; i < canvas.width; i += 20){
  for(let j = 0; j < canvas.height; j += 20){
    drawSquare(i + 10, j + 10, Math.random() * 10 + 8, Math.random() * 100, Math.random() * 120, Math.random() * 255);
  }
}

示例二：

在这个示例中，我们尝试使用动画效果来实现将彩色方块画布慢慢淡化的效果。我们可以通过使用clearRect函数在每一帧绘制前，把canvas画布内容清空以达到效果。

let opacityValue = 1; // 创建一个变量，用于控制canvas透明度

function draw(){
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 每一帧都清空canvas内容
  for(let i = 0; i < canvas.width; i += 20){
    for(let j = 0; j < canvas.height; j += 20){
      drawSquare(i, j, 18, Math.random() * 255, Math.random() * 255, Math.random() * 255);
    }
  }

  opacityValue -= 0.005; // 逐渐减少透明度
  if(opacityValue > 0){ // 如果透明度值还未降为0
    requestAnimationFrame(draw); // 递归调用自身
    ctx.globalAlpha = opacityValue; // 设置画布透明度
  }
}

draw();

这样的效果过程中，灰色色调的小方块逐渐消失，最后画布变成了空白。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript+html5 canvas制作色彩斑斓的正方形效果 - Python技术站

JavaScript+html5 canvas制作色彩斑斓的正方形效果

相关文章