第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

畫(huà)布多邊形邊框被裁剪

畫(huà)布多邊形邊框被裁剪

紅顏莎娜 2022-10-27 14:41:29
當(dāng)我將線寬設(shè)置為大于 1 時(shí),線會(huì)顯示為裁剪??紤]到定義的線寬,我想知道如何在畫(huà)布尺寸中顯示多邊形而不被裁剪。提前致謝!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貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊

所以你想把它保持在畫(huà)布的范圍內(nèi)?如果是這樣,您可以使用clip然后將電流加倍lineWidth并在該點(diǎn)填充/撫摸來(lái)實(shí)現(xiàn)它,這使其保持在畫(huà)布的邊界內(nèi)。默認(rèn)剪輯算法不允許點(diǎn)在其外部填充,這使其始終適用于畫(huà)布邊界。


下面的例子。


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 id="myCanvas" width="770" height="428" style="border:1px solid #d3d3d3;">

</canvas>


查看完整回答
反對(duì) 回復(fù) 2022-10-27
  • 1 回答
  • 0 關(guān)注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)