資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會
時尚
法律HTML5 畫布上的線條等圖形看起來很模糊
我們將在本文中執行的任務是關於 HTML5 畫布上的線條等圖形看起來模糊。
我們觀察到模糊效果，因為不同的裝置的畫素比例各不相同。用於檢視畫布的瀏覽器或裝置經常會影響影像的模糊程度。
Window 介面的小部件畫素比例返回顯示裝置物理畫素與 CSS 畫素的解析度比例。這個數字也可以理解為物理畫素與 CSS 畫素的比例，或者一個畫素與另一個畫素的大小。
讓我們深入瞭解以下示例，以更深入地瞭解 HTML5 畫布上的線條等圖形看起來模糊。
示例 1
在以下示例中，我們取了模糊的簡單文字，使其清晰。
我們正在考慮這張模糊的圖片
<!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>
當指令碼執行時，它將生成未模糊文字的輸出，我們已將其視為上面的示例。
示例 2
考慮另一個例子，其中我們的繪圖看起來有點模糊。
<!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>
當執行上述指令碼時，將出現輸出視窗，在畫布上顯示一條模糊的線，網頁上有一條 1 畫素邊框。
更新於: 16-Dec-2022
2K+ 瀏覽次數
廣告