JavaScript利用多彩线条摆出心形效果的示例代码

下面我来详细讲解JavaScript利用多彩线条摆出心形效果的示例代码的完整攻略。

简介

本示例代码利用了HTML5中的<canvas>标签和JavaScript的requestAnimationFrame()方法，通过不断绘制直线最终呈现出心形效果。代码较为简单，但需要一定的数学基础。

准备工作

1. 在HTML页面中添加一个<canvas>元素，并设置其宽度和高度。

<canvas id="canvas" width="800" height="600"></canvas>

1. 在JavaScript脚本中获取canvas元素，并获取其上下文对象。

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

实现方法

1. 创建一个JavaScript函数，名为drawHeart，该函数用于绘制单个的心形。

function drawHeart() {
  ctx.beginPath();
  ctx.moveTo(75, 40);
  ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
  ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
  ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
  ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
  ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
  ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
  ctx.closePath();
  ctx.fillStyle = "#ff6699";
  ctx.fill();
}

1. 创建一个JavaScript函数，名为drawLine，该函数用于绘制直线。

function drawLine(x1, y1, x2, y2, color, lineWidth) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  ctx.stroke();
}

1. 创建一个JavaScript函数，名为render，该函数用于连续呈现多个心形，最终形成一个多彩心形的效果。

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清空画布
  const hearts = [];
  const colors = ["#FF6B6B", "#FFE66D", "#58DCE3", "#845EC2", "#FF6B6B", "#FFE66D"];
  let index = 0;
  let step = 0;
  while (step < 2 * Math.PI) {   // 以PI的大小为步长，绘制一个圆形
    const x = 16 * Math.pow(Math.sin(step), 3);
    const y = 13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step);
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const size = index > colors.length - 1 ? colors.length - 1 : index;
    const color = colors[size];
    const heart = { x: x + centerX, y: y + centerY, color: color };
    hearts.push(heart);
    step += 0.01;
    index++;
  }
  hearts.forEach(function (heart) {   // 遍历绘制每个心形
    drawHeart(heart.x, heart.y, heart.color);
    if (hearts.length > 1) {   // 连绘两个心形
      const preindex = hearts.indexOf(heart) - 1;
      preindex < 0 ? null : drawLine(heart.x, heart.y, hearts[preindex].x, hearts[preindex].y, heart.color, 1.5);
    }
  });
  requestAnimationFrame(render);   // 循环调用该函数，形成动画效果
}

1. 调用render函数，并启动动画效果。

requestAnimationFrame(render);

示例说明

示例1

代码如下，展示的是单个心形的绘制效果：

function drawHeart() {
  ctx.beginPath();
  ctx.moveTo(75, 40);
  ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
  ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
  ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
  ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
  ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
  ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
  ctx.closePath();
  ctx.fillStyle = "#ff6699";
  ctx.fill();
}

drawHeart();

示例2

代码如下，展示的是多个心形之间连续绘制直线的效果：

function drawHeart() {
  // ...
}

function drawLine(x1, y1, x2, y2, color, lineWidth) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  ctx.stroke();
}

drawHeart();
drawHeart();
drawHeart();
drawLine(100, 150, 300, 300, "#FF6B6B", 1.5);
drawHeart();
drawHeart();

以上两个示例只是单独的功能实现，结合渲染函数render，多个心形之间的连续绘制效果才更加形象丰富。