畫布文本和圖像模糊

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

對於鋸齒邊的第一個答案是非常有幫助的。