画布文本和图像模糊

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

对于锯齿边的第一个答案是非常有帮助的。