溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5 canvas畫矩形時出現(xiàn)邊框樣式不一致的解決方法是怎樣的，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
這兩天需要用到同事HTML5畫圖的東東，發(fā)現(xiàn)里面畫矩形的函數(shù)畫出來的邊框出現(xiàn)了樣式不一致的問題，最后我通過一些排除法找到了問題的癥結，現(xiàn)分享給大家。
先附上HTML5畫矩形的的代碼：
代碼如下:
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
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>
你會發(fā)現(xiàn)執(zhí)行后邊框樣式不一樣，明顯底部很細。顏色也略有不同
把context.rect(188.0, 50, 200, 100.375)修改為context.rect(188.0, 50, 200, 100)后，發(fā)現(xiàn)樣式就完全一致了。
由此說明：畫矩形的時候，如果里面的參數(shù)有不是整數(shù)的話，容易導致邊框問題，所以建議大家取整后再用。
看完上述內容，你們掌握HTML5 canvas畫矩形時出現(xiàn)邊框樣式不一致的解決方法是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
