画布文本和图像模糊

Canvas Text and image blurry

本文关键字：图像 模糊 文本 布文本      更新时间：2023-09-26

我不知道为什么画布中的文本模糊，绘制的图像也模糊，这是我如何使用图像和文本创建画布的示例。

https://jsfiddle.net/jorge182/5ju5pLqb/2/

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
      imageObj.onload = function() {
         context.save();
             context.beginPath();
             context.arc(25, 25, 25, 0, Math.PI * 2, true);
         context.closePath();
         context.clip();
         context.drawImage(imageObj, 0, 0, 50, 50);
         context.beginPath();
         context.arc(0, 0, 25, 0, Math.PI * 2, true);
         context.clip();
         context.closePath();
         context.restore();
         context.lineWidth = 2;
         context.textAlign = 'left';
                 context.font = '8pt Signika Negative';
                 context.fillStyle = 'black';
                 context.fillText('Jorge', 60, 15);
                 context.fillText(' have been here!', 60, 30);
         context.font = '6pt Signika Negative';
         context.textAling = 'left';
         context.fillStyle = '#555';
         context.fillText('Caribe Photo Weading Photograpy', 60, 40);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'

图像模糊可能是因为您将图像大小从其原始大小调整得太多。看看下面的jsFiddle，你可以看到如果你只调整其大小的一半，它仍然看起来不错。

https://jsfiddle.net/gracegotlost/5ju5pLqb/3/

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
        imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
      imageObj.onload = function() {
         var width = imageObj.width;
         var height = imageObj.height;
         context.save();
             context.beginPath();
             context.arc(width/2, height/2, 150, 0, Math.PI * 2, true);
         context.fill();
         context.closePath();
         context.clip();
         context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
         context.beginPath();
         context.arc(0, 0, 25, 0, Math.PI * 2, true);
         context.clip();
         context.closePath();
         context.restore();
         context.textAlign = 'left';
                 context.font = '32pt Signika Negative';
                 context.fillStyle = 'black';
                 context.fillText('Jorge', 60, 350);
                 context.fillText(' have been here!', 150, 350);
         context.font = '20pt Signika Negative';
         context.textAling = 'left';
         context.fillStyle = '#555';
         context.fillText('Caribe Photo Weading Photograpy', 60, 400);
      };

对于模糊的文本，我发现一个帖子非常有帮助。如果您可以增加文本大小，它看起来会更好，但要赋予它更高的分辨率，您可能会执行以下操作：

https://stackoverflow.com/a/15666143/4809052

对于锯齿状边缘，第一个答案非常有帮助。

相关文章：