画布渲染模糊不光滑

嗨大家我需要帮助，当我渲染图像它变得模糊，所以我需要帮助的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发送错误报告。 –

画布渲染模糊不光滑

回答

相关问题