用Canvas亲手DIY你的专属中秋月饼，刻上你的女神名字吧！

2023-10-10 23:00:47

中秋佳节，月满人圆，正是与家人团聚、共度良宵的好时节。作为中秋节的传统美食，月饼自然也是必不可少的。如果你想为你的女神送上一份独一无二的心意，不妨亲手制作一个专属中秋月饼吧！

别以为制作月饼很难，其实用Canvas就可以轻松实现哦！Canvas是一种HTML5元素，可以用来绘制图形、图像和文本。利用Canvas，我们可以轻松地制作出各种形状和图案的月饼，还能在上面刻上你女神的名字，让她在这个中秋节留下难忘的回忆。

接下来，就让我们一起来看看如何用Canvas制作一个刻有你女神名字的中秋月饼吧！

第一步：准备工作

首先，我们需要准备一张背景图。这张背景图可以是你自己拍摄的，也可以是从网上下载的。需要注意的是，背景图最好是圆形的，这样才能更好地模拟月饼的外形。

接下来，我们需要准备一个文本编辑器，比如记事本、Sublime Text或Atom。在文本编辑器中，我们将创建两个文件：index.html和script.js。

index.html文件是HTML文档，主要负责页面结构和内容的展示。script.js文件是JavaScript文件，主要负责实现Canvas的绘制功能。

第二步：绘制Canvas

在index.html文件中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>

  <script src="script.js"></script>
</body>
</html>

这段代码创建了一个Canvas元素，并设置了它的宽和高。

接下来，在script.js文件中，添加以下代码：

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

//绘制背景图
var bgImage = new Image();
bgImage.src = "background.png";
bgImage.onload = function() {
  ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
};

//绘制月饼文字
ctx.fillStyle = "white";
ctx.font = "bold 50px Arial";
ctx.fillText("你的女神名字", canvas.width / 2 - 100, canvas.height / 2 + 25);

这段代码首先获取了Canvas元素，然后使用getContext方法获取了它的绘图上下文。接下来，它绘制了背景图，并使用fillText方法在月饼中间写上了文字。

第三步：保存月饼

当月饼制作完成后，我们可以使用toDataURL方法将它保存为图片。在script.js文件中，添加以下代码：

//保存月饼
var dataURL = canvas.toDataURL("image/png");
var link = document.createElement("a");
link.download = "myMooncake.png";
link.href = dataURL;
link.click();