首先，在HTML文件里创建一个用于展示绘图结果的Canvas元素：
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JavaScript 绘制菱形</title>
</head>
<body>
<canvas id="myDrawing" width="400" height="350"></canvas>
<script src="script.js"></script>
</body>
</html>
接下来，在对应的`script.js`文件中利用 Canvas API 来进行图形绘制操作：
javascript
// 获取 canvas 元素以及其2D渲染上下文对象
var canvas = document.getElementById('myDrawing');
var ctx = canvas.getContext('2d');
function drawDiamond(xCenter, yCenter, size) {
// 计算顶点坐标
var x1 = xCenter - Math.floor(size / 2);
var y1 = yCenter;
var x2 = xCenter;
var y2 = yCenter + Math.floor(size / 2);
var x3 = xCenter + Math.floor(size / 2);
var y3 = yCenter;
var x4 = xCenter;
var y4 = yCenter - Math.floor(size/2);
// 开始路径绘制，并移动到第一个顶点位置
ctx.beginPath();
ctx.moveTo(x1, y1);
// 连接各个顶点以形成菱形轮廓
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.closePath();
// 填充和描边菱形
ctx.fillStyle = '#ff0000'; // 设置填充颜色为红色（可自定义）
ctx.strokeStyle = '#000000'; // 设置线条颜色为黑色（可自定义）
ctx.fill(); // 填充形状
ctx.stroke(); // 描绘边界线
}
// 调用函数绘制菱形，参数分别为：中心x轴坐标、中心y轴坐标及菱形大小
drawDiamond(canvas.width / 2, canvas.height / 2, 75);
上述代码详细展示了运用 JavaScript 在 HTML 的 `<canvas>` 标签内绘制出一个居中的红底黑框菱形的过程。关键在于计算四个角点的位置并通过 `beginPath()` 和一系列的 `lineTo()` 方法连接这些点构建起菱形的基本结构，最后调用 `fill()` 和 `stroke()` 完成填色与描边步骤即可完成菱形的绘制任务。
此方法不仅适用于简单的几何图形如菱形，还可依据相似原理扩展至更复杂的多边形或其他创意图案的设计之中。希望这个实例能帮助你深入理解和应用JavaScript结合Canvas来进行图像处理的能力！