自定义钻石形状的html或jscript

Question

我需要一些在html中绘制形状的方法。我试过四处寻找，但我没有发现任何相关内容。

这是我需要的草图。

我需要用红色绘制形状。我知道如何绘制点，但我不知道如何连接它们，因为红点可以移动。蓝点标记红点可以到达的位置。

Answer 1

你可以使用画布。以下是绘制三角形的方法：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();

<canvas id="canvas" width="150" height="150">Your browser lacks canvas support.</canvas>

我会留给你弄清楚如何画一颗钻石并让它成为红色。