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

畫布多邊形邊框被裁剪

首頁猿問畫布多邊形邊框被裁剪

畫布多邊形邊框被裁剪

JavaScript

紅顏莎娜 2022-10-27 14:41:29

當我將線寬設置為大于 1 時，線會顯示為裁剪?？紤]到定義的線寬，我想知道如何在畫布尺寸中顯示多邊形而不被裁剪。提前致謝！var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var polygon = [ {x: 178, y: 160}, {x: 124, y: 0}, {x: 265, y: 88}, {x: 382, y: 0}, {x: 393, y: 118}, {x: 770, y: 178}, {x: 479, y: 221}, {x: 441, y: 228}, {x: 579, y: 376}, {x: 309, y: 314}, {x: 197, y: 428}, {x: 183, y: 304}, {x: 0, y: 324}, {x: 132, y: 240}, {x: 36, y: 152}];ctx.strokeStyle = "rgba(46, 139, 86, 1.00)";ctx.fillStyle = "rgba(156, 205, 50, 1.00)";ctx.lineWidth = 9;ctx.beginPath();ctx.moveTo(polygon[0].x, polygon[0].y);for( var i = 1; i<polygon.length; i++){ ctx.lineTo(polygon[i].x, polygon[i].y);}ctx.closePath();ctx.stroke();ctx.fill();<canvas id="myCanvas" width="770" height="428" style="border:1px solid #d3d3d3;"></canvas>

查看完整描述

1 回答

一只斗牛犬

TA貢獻1784條經驗獲得超2個贊

所以你想把它保持在畫布的范圍內？如果是這樣，您可以使用clip然后將電流加倍lineWidth并在該點填充/撫摸來實現它，這使其保持在畫布的邊界內。默認剪輯算法不允許點在其外部填充，這使其始終適用于畫布邊界。

下面的例子。

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

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

var polygon = [

{x: 178, y: 160}, {x: 124, y: 0}, {x: 265, y: 88},

{x: 382, y: 0}, {x: 393, y: 118}, {x: 770, y: 178},

{x: 479, y: 221}, {x: 441, y: 228}, {x: 579, y: 376},

{x: 309, y: 314}, {x: 197, y: 428}, {x: 183, y: 304},

{x: 0, y: 324}, {x: 132, y: 240}, {x: 36, y: 152}

];

ctx.strokeStyle = "rgba(46, 139, 86, 1.00)";

ctx.fillStyle = "rgba(156, 205, 50, 1.00)";

const lineWidth = 9;

ctx.lineWidth = lineWidth;

ctx.beginPath();

ctx.moveTo(polygon[0].x, polygon[0].y);

for( var i = 1; i<polygon.length; i++){

ctx.lineTo(polygon[i].x, polygon[i].y);

}

ctx.closePath();

ctx.save();

ctx.clip();

ctx.lineWidth *= 2;

ctx.fill();

ctx.stroke();

ctx.restore();

</canvas>

反對回復 2022-10-27

1 回答
0 關注
101 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

畫布多邊形邊框被裁剪

畫布多邊形邊框被裁剪

1 回答

添加回答