数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
广告