資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時裝
法律HTML5 Canvas 繪圖，比如線看起來模糊
我們將在本文中執行的任務是關於 HTML5 Canvas 繪圖，例如線條看起來模糊。
我們觀察到模糊效果，因為不同的裝置的畫素比例各不相同。用於檢視 Canvas 的瀏覽器或裝置通常會影響影像的模糊程度。
Window 介面的小工具畫素比率返回顯示裝置物理畫素與其 CSS 畫素的比例以獲取解析度。此數字也可以理解為物理畫素與 CSS 畫素的比例，或者一個畫素與另一個畫素的大小。
讓我們深入瞭解以下示例，以更多地瞭解 HTML5 Canvas 繪圖，例如線看起來模糊。
示例 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>
當執行上述指令碼時，輸出視窗會出現，在 Canvas 上顯示一條模糊的線，網頁上有一條 1 畫素的邊框。
更新於：2022年12月16日
2K+ 瀏覽量
廣告