介绍
我正在尝试处理画布动画上的模糊视觉效果。这种模糊在移动设备、视网膜和高 dpi（每英寸点数）屏幕上尤为普遍。
我正在寻找一种方法来确保使用画布绘制的像素在低 dpi 屏幕和高 dpi 屏幕上看起来最好。作为这个问题的解决方案，我写了多篇关于画布缩小的文章，并遵循了本教程：
https://www.kirupa.com/canvas/canvas_high_dpi_retina.htm
在项目中集成缩减
我想在其中实现缩减的项目可以在下面找到，它包含一些重要的功能：
题
我试图实现的目标：我面临的问题似乎很简单。当网站（带有画布）在移动设备（例如，Iphone，每英寸的像素数高于普通台式机）上打开时。图像显得更加模糊。我真正想要实现的是从图像中消除这种模糊性。我把这个红了，它说模糊可以通过下采样来消除。我试图在提供的代码中加入这种技术，但它并没有完全奏效。图像变大了，我无法将图像缩放回原始大小。片段它没有正确实现，输出仍然模糊。我做错了什么，我该如何解决这个问题？
代码片段的解释
该变量devicePixelRatio设置为2模拟高 dpi 手机屏幕，低 dpi 屏幕的 adevicePixelRatio为 1。生成的多个预渲染画布的功能spawn是代码片段有 5 个不同的画布，但在生产环境中有 10 个。
如果这篇文章有任何信息缺失或问题，请告诉我。非常感谢！
代码片段
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d' );
var circles = [];
//Simulate Retina screen = 2, Normal screen = 1
let devicePixelRatio = 2
function mainCanvasPixelRatio() {
// get current size of the canvas
let rect …我想将搜索栏中的值显示为""的搜索结果.
这就是我到目前为止所做的,为什么这不起作用？
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="autocomplete" value="" placeholder="Search for names.." title="Type in a name">
<p>
Search results for "<span id="result"></span>"
</p>
<button onclick="myname();"> Button </button>
<script>
function myname () {
document.getElementById("autocomplete").value = document.getElementById("result").innerHTML;
}
</script>
</body>
</html>