小编ni3*_*o42的帖子

HTML5画布在翻译时模糊图像模式

使用图像创建图案时使用'no-repeat','repeat-x'或'repeat-y'时出现奇怪的问题.考虑以下:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var imageObj = new Image();
      imageObj.onload = function() {        

        context.rect(0, 0, canvas.width, canvas.height);
        context.translate(50,50);

        var pattern = context.createPattern(imageObj, 'no-repeat');
        context.fillStyle = pattern;
        context.fill();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我正在翻译形状中的图像模式(在这种情况下,它是一个矩形,但它适用于任何形状).在Chrome 35.0.1916.114 m上,它会导致图像"拖尾".有没有办法避免涂抹效果或我做了一些疯狂的错误.