Question

我不知道为什么画布中的文字模糊不清，绘制的图像也模糊不清，这就是我用图像和文字创建画布的例子。

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'

Answer 1

模糊图像可能是因为您将图像从原始尺寸调整得太多。看看下面的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

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

画布文字和图像模糊

1 个答案: