在矩形外沿边缘绘制画布文本

Question

我正在尝试沿着矩形编写每个边的描述。原因是要描述矩形内外（沿边）的每条边的长度。有没有办法实现它？

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Clip a rectangular area

ctx.rect(50, 20, 200, 120);

ctx.stroke();

ctx.clip();

// Draw red rectangle after clip()

ctx.fillStyle = "red";

ctx.fillRect(0, 0, 150, 100);

这应该在顶部边缘（外部）上方显示 200，沿左边缘（外部）显示 150

Answer 1

（指向这个答案 -&nbsp;html canvas 中的文本）和这个jsfiddle（用于文本旋转），我能够构建下面的代码。希望它符合您的规格。附上结果截图。&nbsp; var c = document.getElementById("myCanvas");&nbsp; &nbsp; var ctx = c.getContext("2d");&nbsp; &nbsp; const rectPosX = 50;&nbsp; &nbsp; const rectPosY = 50;&nbsp; &nbsp; const rectLength = 200;&nbsp; &nbsp; const rectHeight = 150;&nbsp; &nbsp; ctx.fillStyle = "red";&nbsp; &nbsp; ctx.fillRect(rectPosX, rectPosY, rectLength, rectHeight);&nbsp; &nbsp; ctx.fillStyle = "blue";&nbsp; &nbsp; ctx.fillText('200', rectPosX + rectLength / 2, rectPosY);&nbsp; &nbsp; ctx.fillText('150', rectPosX, rectPosY + rectHeight / 2);&nbsp; &nbsp; ctx.fillText('200', rectPosX&nbsp; + rectLength / 2, rectPosY + rectHeight);&nbsp; &nbsp; ctx.save();&nbsp; &nbsp; ctx.translate(rectPosX + rectLength, rectPosY + rectHeight / 2);&nbsp; &nbsp; ctx.rotate(0.5*Math.PI);&nbsp; &nbsp; ctx.fillText('150', 0, 0);&nbsp; &nbsp; ctx.restore();<canvas id="myCanvas" width="400" height="300"></canvas>