畫布渲染模糊不光滑

嗨大家我需要幫助，當我渲染圖像它變得模糊，所以我需要幫助的HTML代碼;畫布渲染模糊不光滑

<html> 
    <head> 
     <title>Minecraft Skin Renderer</title> 
     <script src="js/mcSkinRenderer.js" type="text/javascript"></script> 
    </head> 
    <body> 

     <img class="skin" src="http://www.minecraft.net/skin/Notch.png"/> 

     <script type="text/javascript"> 
      //renderMCSkins(className, scale, replacementImage); 
      renderMCSkins('skin', 4); 
     </script> 
    </body> 
</html>

javascript code;在畫布上幫助

//this is the image displayed when there is no support for canvas 
    var defaultImageSrc = "images/charRendered.png"; 
    //this is the default scale to render the image 
    var scale = 4; 

    function renderMCSkins(classNameIn, scaleIn, replacementImageIn) 
    { 
     scale = scaleIn || scale; 
     defaultImageSrc = replacementImageIn || defaultImageSrc; 

     //we need custom support for IE, because it doesn't support getElementsByClassName 
     if (navigator.appName=="Microsoft Internet Explorer") { 
      var skinImages = getElementsByClassName(classNameIn, 'img'); 
     } else { 
      var skinImages = document.getElementsByClassName(classNameIn); 
     } 

     var canvasSupported = supportsCanvas(); 

     //walk trough the images 
     for(var i in skinImages) 
     { 
      var skin = skinImages[i]; 

      //if canvas is supported, we render the image to a skin 
      if(canvasSupported) { 
       if(skin.complete) { 
        renderSkin(skin); 
       } 
       else { 
        skin.onload = handleSkinLoaded; 
        skin.onerror = handleImageError; 
       } 
      } else { 
       //if it's not supported, we use the default image 
       skin.src = defaultImageSrc; 
      } 
     } 
    } 

    function handleSkinLoaded() { 
     renderSkin(this); 
    } 

    function handleImageError() { 
     //create replacement image 
     var replacement = new Image(); 
     replacement.src = defaultImageSrc; 
     //we assign the same classname the image has, for CSS purposes 
     replacement.setAttribute('class', this.getAttribute('class')); 
     this.parentNode.replaceChild(replacement, this); 
    } 

    function renderSkin(skinImage) { 
     //we create a new canvas element 
     var canvas = document.createElement('canvas'); 
     canvas.width = 64; 
     canvas.height = 128; 
     //we assign the same classname the image has, for CSS purposes 
     canvas.setAttribute('class', skinImage.getAttribute('class')); 
     var context = canvas.getContext("2d"); 
     var s = scale; 
     //draw the head 
     context.drawImage(skinImage, 8, 8, 8, 8, 4*s, 0*s, 8*s, 8*s); 
     //draw the body 
     context.drawImage(skinImage, 20, 20, 8, 12, 4*s, 8*s, 8*s, 12*s); 
     //draw the left leg 
     context.drawImage(skinImage, 4, 20, 4, 12, 4*s, 20*s, 4*s, 12*s); 
     //draw the right leg 
     context.drawImage(skinImage, 4, 20, 4, 12, 8*s, 20*s, 4*s, 12*s); 
     //draw the left arm 
     context.drawImage(skinImage, 44, 20, 4, 12, 0*s, 8*s, 4*s, 12*s); 
     //draw the right arm 
     context.drawImage(skinImage, 52, 20, 4, 12, 12*s, 8*s, 4*s, 12*s); 

     //we replace the image with the canvas 
     skinImage.parentNode.replaceChild(canvas, skinImage); 
    } 

    //helper function for IE 
    function getElementsByClassName(className, tag, elm){ 
     var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)"); 
     var tag = tag || "*"; 
     var elm = elm || document; 
     var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); 
     var returnElements = []; 
     var current; 
     var length = elements.length; 
     for(var i=0; i<length; i++){ 
      current = elements[i]; 
      if(testClass.test(current.className)){ 
       returnElements.push(current); 
      } 
     } 
     return returnElements; 
    } 

    //helper function to check canvas support 
    function supportsCanvas() { 
     canvas_compatible = false; 
     try { 
       canvas_compatible = !!(document.createElement('canvas').getContext('2d')); // S60 
       } catch(e) { 
       canvas_compatible = !!(document.createElement('canvas').getContext); // IE 
     } 
     return canvas_compatible; 
    }

碼心不是我的這樣的IM不好請圖像仍像 blurryskin

，但我想這樣說，這smoothskin

來源

2016-03-11 Trke Rap

畫布的大小是否受css的影響？如果是，則刪除它並僅在畫布元素上設置寬度和高度。 – philipp

沒有即時通訊不使用css它應該是比例1，但我做了4因爲我想在規模4和代碼創建畫布自動，並給它的寬度和高度var canvas = document.createElement（'canvas'）; canvas.width = 64; canvas.height = 128; –

只要確保css不以任何方式影響大小，在元素本身設置的尺寸（寬度和高度屬性）決定使用的像素緩衝區的大小 – philipp

-1

我這今天面對在Chrome最新版本，從字面上浪費追逐它3個小時。最後，事實證明，只有當瀏覽器縮放比例降低到100％以下時纔會發生問題，將窗口縮放重置爲100％可以解決問題。

希望這個信息有助於開發者重現和修復錯誤！

來源

2017-10-27 15:19:24 meet2KK

考慮向Chrome發送錯誤報告。 –

畫布渲染模糊不光滑

回答

相關問題