canvas畫矩形時(shí)出現(xiàn)邊框樣式不一致如何解決

發(fā)布時(shí)間：2022-03-15 15:46:13 來源：億速云閱讀：359 作者：iii 欄目：web開發(fā)

本文小編為大家詳細(xì)介紹“canvas畫矩形時(shí)出現(xiàn)邊框樣式不一致如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“canvas畫矩形時(shí)出現(xiàn)邊框樣式不一致如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

先附上HTML5畫矩形的的代碼：

代碼如下:

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.beginPath();

context.rect(188.0, 50, 200, 100.375);

context.fillStyle = 'white';

context.fill();

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

</script>

你會(huì)發(fā)現(xiàn)執(zhí)行后邊框樣式不一樣，明顯底部很細(xì)。顏色也略有不同

把context.rect(188.0, 50, 200, 100.375)修改為context.rect(188.0, 50, 200, 100)后，發(fā)現(xiàn)樣式就完全一致了。

由此說明：畫矩形的時(shí)候，如果里面的參數(shù)有不是整數(shù)的話，容易導(dǎo)致邊框問題，所以建議大家取整后再用。

讀到這里，這篇“canvas畫矩形時(shí)出現(xiàn)邊框樣式不一致如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

canvas畫矩形時(shí)出現(xiàn)邊框樣式不一致如何解決

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽