我們?cè)诒疚闹幸獔?zhí)行的任務(wù)是關(guān)于 HTML5 畫(huà)布繪圖，例如線條看起來(lái)模糊。
我們觀察到模糊效果，因?yàn)椴煌O(shè)備的像素比不同。用于查看畫(huà)布的瀏覽器或設(shè)備經(jīng)常會(huì)影響圖像的模糊程度。
Window 接口的 Pixel Ratio 小工具返回顯示設(shè)備的物理像素與其 CSS 像素分辨率的比例。這個(gè)數(shù)字也可以理解為物理與CSS像素的比例，或者一個(gè)像素與另一個(gè)像素的大小。
讓我們深入研究以下示例，以了解有關(guān) HTML5 畫(huà)布繪制（如線條看起來(lái)模糊）的更多信息。
示例 1
在下面的示例中，我們采用模糊的簡(jiǎn)單文本來(lái)使其清晰。
我們正在考慮這張模糊的圖像
<!DOCTYPE html>
<html>
<body>
<canvas id="my tutorial"
style="border:1px solid black;">
</canvas>
<script>
var canvas = document.getElementById('my tutorial');
var ctx = canvas.getContext('2d');
window.devicePixelRatio=2;
var size = 170;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
var scale = window.devicePixelRatio;
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
ctx.scale(scale, scale);
ctx.font = '10px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var x = size / 2;
var y = size / 2;
var textString = "TUTORIALSPOINT";
ctx.fillText(textString, x, y);
</script>
</body>
</html>
登錄后復(fù)制
當(dāng)腳本執(zhí)行時(shí)，它將生成文本輸出，我們已經(jīng)將其作為上面的示例進(jìn)行考慮，而不會(huì)變得模糊。
示例 2
考慮到我們的繪圖看起來(lái)有點(diǎn)模糊。
<!DOCTYPE html>
<html>
<style>
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}
</style>
<body>
<table>
<tr><td>Line on canvas:</td></tr>
<tr><td><canvas id="tutorial" width="100" height="100"></td><td><div> </div></td></tr>
</table>
<script>
var ctx = document.getElementById("tutorial").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();
</script>
</body>
</html>
登錄后復(fù)制
運(yùn)行上述腳本時(shí)，會(huì)出現(xiàn)輸出窗口，在畫(huà)布上顯示一條模糊的線，并在網(wǎng)頁(yè)上顯示 1 像素邊框。
以上就是HTML5畫(huà)布繪制的線條看起來(lái)模糊的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
