Question

我发现如果我将一个HTML5画布绘制到另一个，如果我使用drawImage（）的2参数版本，我只需提供目标x和y坐标，这比我更快使用9参数版本，我指定源和目标偏移和边界。即使后者中指定的边界与前者中的源画布大小相同，也是如此。

我在Chrome中看到了这一点。

这是一个jsFiddle，展示了我所看到的：

＆＃13;

var cycleResults = document.getElementById('cycleResults');
var result = document.getElementById('result');
var btn = document.getElementById('btn');

var canvas = $('.c')[0],
  context = canvas.getContext("2d"),
  scratchCanvas = document.createElement('canvas'),
  scratchContext = scratchCanvas.getContext("2d"),
  scratchCanvas2 = document.createElement('canvas'),
  scratchContext2 = scratchCanvas2.getContext("2d");
  
context.fillStyle = 'red';
context.fillRect(0, 0, 25, 25);
context.fillStyle = 'white';

scratchCanvas.setAttribute('width', 25);
scratchCanvas.setAttribute('height', 25);
scratchCanvas.style.width = '25px';
scratchCanvas.style.height = '25px';
scratchContext.fillStyle = 'white';
scratchContext.fillText('F', 12, 12);

scratchCanvas2.setAttribute('width', 8);
scratchCanvas2.setAttribute('height', 8);
scratchCanvas2.style.width = '8px';
scratchCanvas2.style.height = '8px';
scratchContext2.fillStyle = 'white';
scratchContext2.fillText('F', 0, 8);

function test1()
{
    context.drawImage(scratchCanvas2, 12, 4);
}

function test2()
{
    context.drawImage(scratchCanvas, 12, 4, 8, 8, 12, 4, 8, 8);
}

function test3()
{
    context.fillText('F', 12, 12);
}

// BENCHMARK ====================
btn.onclick = function runTests(){
  btn.setAttribute('disable', true);
  cycleResults.innerHTML = '';
  result.textContent = 'Tests running...';
  
  var suite = new Benchmark.Suite;

  // add tests
  suite
  .add('test1', test1)
  .add('test2', test2)
  .add('test3', test3)
  // add listeners
  .on('cycle', function(event) {
    var result = document.createElement('li');
    result.textContent = String(event.target);
    
    document.getElementById('cycleResults')
    	.appendChild(result);
  })
  .on('complete', function() {
    result.textContent = 'Fastest is ' + this.filter('fastest').pluck('name');
    btn.setAttribute('disable', false);
  })
  // run async
  .run({ 'async': true });
};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas class="c" width=25 height=25></canvas>
<ul id='cycleResults'>

</ul>
<div id="result">

</div>
<br>
<button id="btn">
Run Tests
</button>

＆＃13;

最后，我试图确定这是否是一个有效的优化，而不是使用fillText（）。 fillText（）比9-param drawImage（）调用快，但比2-param调用慢。这是预期的，有人可以解释为什么会这样吗？

Answer 1

2-param版本最终调用相同的9-param版本，两个测试之间的性能差异是在2-param版本中，我们正在绘制整个源图像，而另一方面我们＆＃39;只画一部分。前一种情况更有可能受益于将所有像素存储在RAM中的连续字节中，这将有助于防止L1缓存未命中。

为什么2-param drawImage比9-param更快？

1 个答案: