js canvas 矩形做凸起凹陷雕刻不要填充

要在JavaScript的Canvas中创建一个凸起、凹陷或雕刻的矩形，可以使用绘制路径的方法来实现。具体步骤如下：

创建一个HTML文件，添加一个Canvas元素，并为其指定一个ID，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Example</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

在JavaScript文件（script.js）中，获取Canvas元素并获取其上下文：

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

使用路径的方法来绘制凸起、凹陷或雕刻的矩形。以下是一些示例代码：

凸起的矩形：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.closePath();
ctx.stroke();

凹陷的矩形：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.stroke();

雕刻的矩形：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.stroke();

这些示例代码将创建一个凸起、凹陷或雕刻的矩形，并使用线条描边而不进行填充。你可以根据需要调整坐标和线条样式来实现你想要的效果