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

Question

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上,它会导致图像"拖尾".有没有办法避免涂抹效果或我做了一些疯狂的错误.

小提琴

屏幕截图:屏幕截图
示例http://i59.tinypic.com/2mq2792.jpg

Answer 1

Bal*_*bin 2

context.translate适用于在画布上绘制的起点。相反，您想要填充矩形的特定部分。

imageObj.onload = function() {
  var width = 600;
  var height = 400;
  var patOffsetX = 50;
  var patOffsetY = 50;

  context.rect(0, 0, width, height);

  var pattern = context.createPattern(imageObj, 'repeat');
  context.fillStyle = pattern;
  context.fillRect(patOffsetX, patOffsetY, width - patOffsetX, height - patOffsetY);
  context.stroke(); //added to help see the rect
};

Run Code Online (Sandbox Code Playgroud)

我还更新了画布的大小以查看其工作原理。

<canvas id="myCanvas" width="800" height="400"></canvas>

Run Code Online (Sandbox Code Playgroud)

小提琴

归档时间：	11 年，5 月前
查看次数：	566 次
最近记录：	6 年，1 月前