已解決430363個問題，去搜搜看，總會有你想問的

在矩形外沿邊緣繪制畫布文本

首頁猿問在矩形外沿邊緣繪制畫布文本

在矩形外沿邊緣繪制畫布文本

JavaScript

HUWWW 2021-06-16 17:12:21

我正在嘗試沿著矩形編寫每個邊的描述。原因是要描述矩形內外（沿邊）的每條邊的長度。有沒有辦法實現它？var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// Clip a rectangular areactx.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

查看完整描述

1 回答

瀟湘沐

TA貢獻1816條經驗獲得超6個贊

（指向這個答案 - html canvas 中的文本）和這個jsfiddle（用于文本旋轉），我能夠構建下面的代碼。希望它符合您的規格。

附上結果截圖。

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

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

const rectPosX = 50;

const rectPosY = 50;

const rectLength = 200;

const rectHeight = 150;

ctx.fillStyle = "red";

ctx.fillRect(rectPosX, rectPosY, rectLength, rectHeight);

ctx.fillStyle = "blue";

ctx.fillText('200', rectPosX + rectLength / 2, rectPosY);

ctx.fillText('150', rectPosX, rectPosY + rectHeight / 2);

ctx.fillText('200', rectPosX + rectLength / 2, rectPosY + rectHeight);

ctx.save();

ctx.translate(rectPosX + rectLength, rectPosY + rectHeight / 2);

ctx.rotate(0.5*Math.PI);

ctx.fillText('150', 0, 0);

ctx.restore();

反對回復 2021-06-18

1 回答
0 關注
145 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在矩形外沿邊緣繪制畫布文本

在矩形外沿邊緣繪制畫布文本

1 回答

添加回答