时间戳

首页 > 解决方案 > 如何修复 CSS2 变换上的画布模糊：比例（2）？

javascript - 如何修复 CSS2 变换上的画布模糊：比例（2）？

问题描述

我尝试了几乎所有可以在谷歌上找到的东西，但仍然无法在画布中找到解决方案。

因为缩放在不同浏览器中对定位的影响不同，所以我想使用 CSS 2d translate() 通常会提供比 position: absolute top & left 更好的 FPS。

https://jsfiddle.net/p0L9ztw8/

const dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
const chineseSize = 60
const scale = 2

HanziWriter.create($('#test1')[0], '龍', {
  renderer: 'canvas',
  width: chineseSize * dpr * scale,
  height: chineseSize * dpr * scale,
  padding: 2
});


HanziWriter.create($('#test2')[0], '龍', {
  renderer: 'canvas',
  width: chineseSize * dpr * scale,
  height: chineseSize * dpr * scale,
  padding: 2
});
html, body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  transform-origin: left top;
}

canvas {
  width: 60px;
  height: 60px;
}

#test1 {
  left: 0;
  transform: scale(2);
}

#test2 {
  left: 50%;
  zoom: 200%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.2.0/dist/index.cjs.min.js"></script>
<div id="test1"></div>
<div id="test2"></div>

标签： javascriptcsscanvasblurry

解决方案

您是否尝试过在 css 中进行像素化图像渲染？这可能是画布和每个要缩放的 div 所需要的。

 canvas {
    image-rendering: -moz-crisp-edges;image-rendering: -webkit-crisp-edges;image-rendering: pixelated;image-rendering: crisp-edges;
    width: 60px;
    height: 60px;
  }

推荐阅读