正文

HTML5心形图片源码示例：使用Canvas绘制心形图案

/0 浏览量
0521

Canvas是HTML5提供的一个绘图元素，它可以让我们在网页上直接绘制图形、文本和路径等。使用Canvas绘制心形图案是一个很有趣的小项目，可以展示Canvas的强大绘图能力。以下是一个使用HTML5 Canvas绘制心形图案的源码示例。

1. 创建HTML文件

首先，我们需要创建一个HTML文件，并在其中引入所需的CSS和JavaScript文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Canvas绘制心形图案</title>
<style>
  body {
    text-align: center;
    background-color: #f2f2f2;
  }
  canvas {
    border: 1px solid #000;
    margin-top: 50px;
  }
</style>
</head>
<body>
<canvas id="heartCanvas" width="400" height="400"></canvas>
<script src="drawHeart.js"></script>
</body>
</html>

2. 创建JavaScript文件（drawHeart.js）

在JavaScript文件中，我们将使用Canvas API来绘制心形图案。

document.addEventListener('DOMContentLoaded', function() {
  var canvas = document.getElementById('heartCanvas');
  var ctx = canvas.getContext('2d');

  function drawHeart(x, y, scale) {
    ctx.beginPath();
    ctx.moveTo(x + scale * 0, y - scale * 3.5);
    ctx.bezierCurveTo(x + scale * 1.5, y - scale * 4, x + scale * 3.5, y - scale * 1.5, x + scale * 4.5, y + scale * 1.5);
    ctx.bezierCurveTo(x + scale * 4, y + scale * 4, x + scale * 1.5, y + scale * 4, x + scale * 0, y - scale * 3.5);

    ctx.moveTo(x - scale * 0, y - scale * 3.5);
    ctx.bezierCurveTo(x - scale * 1.5, y - scale * 4, x - scale * 3.5, y - scale * 1.5, x - scale * 4.5, y + scale * 1.5);
    ctx.bezierCurveTo(x - scale * 4, y + scale * 4, x - scale * 1.5, y + scale * 4, x - scale * 0, y - scale * 3.5);

    ctx.fillStyle = '#e74c3c';
    ctx.fill();
  }

  var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  var scale = canvasHeight / 10;
  drawHeart(canvasWidth / 2, canvasHeight / 2, scale);
});

3. 代码解析

在上面的代码中，我们首先在drawHeart函数中定义了绘制心形图案的路径。我们使用bezierCurveTo方法来创建心形的顶部曲线。然后，我们调用fill方法来填充颜色。

接着，我们通过canvasWidth和canvasHeight获取画布的宽度和高度，并计算出缩放比例scale。最后，我们在画布的中心位置调用drawHeart函数来绘制心形图案。

通过上述步骤，你可以在网页上成功绘制一个心形图案。你可以调整画布大小和缩放比例来改变心形的大小和形状。希望这个示例能帮助你更好地理解Canvas API的使用。

-- 展开阅读全文 --