HTML5画布在平移时模糊图像纹理

Question

HTML5画布在平移时模糊图像纹理

5

使用“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>

我正在翻译关于在形状内（本例中为矩形，但适用于任何形状）的图像模式。在 Chrome 35.0.1916.114 m 上，会导致图像出现“涂抹”的效果。有没有办法避免涂抹效应，或者我做错了什么？

Fiddle

屏幕截图：

- ni3po42

也证实了这在FireFox 29.0.1中发生。 - ni3po42

1

你可以发布一张你所看到的屏幕截图吗？ - Jonas Grumann

http://tinypic.com/r/2mq2792/8 - ni3po42

2个回答

0

你可以使用剪裁(clipping)完成你的任务

保存上下文状态。
绘制边界矩形。
将未来的绘图剪裁到边界矩形内部。
使用您的图片作为模式，在边界矩形内绘制另一个偏移矩形。
将上下文恢复到未经剪裁的状态。

演示: http://jsfiddle.net/m1erickson/fHKLk/

enter image description here

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house16x16.png";
    function start(){

        // create a pattern
        var pattern = context.createPattern(img,'repeat');

        // save the unclipped context state
        context.save();

        // draw the boundary rect
        context.beginPath();
        context.rect(20,20,200,200);
        context.stroke();

        // clip future drawing to inside the boundary rect
        context.clip();

        // draw a 2nd rect with a 50px offset from the boundary rect
        // and using your image pattern
        context.fillStyle=pattern;
        context.fillRect(20+50,20+50,300,300);

        // restore the context to its unclipped state
        context.restore();
    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

- markE

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ballbin · Accepted Answer

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
};

我已经更新了画布的大小以确保其正常工作。

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

Fiddle