Question

将我的Firefox更新为44.0版后，在html5画布中旋转的图像显示为锯齿状边缘。我在Mac OSX上。有什么想法吗？

这是我的示例代码

    window.onload = function() {
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      ctx.rotate(0.5);
      ctx.drawImage(img, 0, 0, 300, 250);
    };

body {
  background-color: #D4D4D4
}
#scream {
  visibility: hidden;
}
#canvas {
  background-color:#FFFFFF;
}

<canvas id="canvas" width="300" height="250"></canvas>
<p>
  <img id="scream" src="http://lorempixel.com/image_output/people-q-c-300-250-9.jpg" alt="The Scream" />
</p>

Answer 1

这确实看起来像drawImage方法使用的Firefox抗锯齿算法中的一个错误。

不幸的是，我仍然可以在FF 45.0b1中重现它，而在FF 47.0a1中，它也被推广到fillRect方法。
^{（所有测试均在mac上进行）}

我在mozilla的bugzilla上填写bug report。

FF的另一个片段＆lt; 45：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

// create a buffer canvas
var can = c.cloneNode(true);
var x = can.getContext('2d');
x.fillStyle = ctx.fillStyle = 'red'
x.fillRect(0, 0, 300, 250);

ctx.rotate(0.5);
ctx.drawImage(can, 0, 0, can.width, can.height)

btn.onclick = function(){
  ctx.clearRect(0, 0, 300, 250);
  if(this.innerHTML.indexOf('drawImage')>0){
    // draw the buffer canvas
    ctx.drawImage(can, 0, 0, can.width, can.height);
    this.innerHTML = "use fillRect method";
    
    }
  else{
    ctx.fillRect(0, 0, 300, 250);
    this.innerHTML = "use drawImage method";
    }
  };

button{vertical-align : top}

<canvas id="canvas" width="300" height="250"></canvas>
<button id="btn">use fillRect method</button>

更新到Firefox 44.0后，HTML画布中旋转图像的锯齿状边缘

1 个答案: