12

HTML5キャンバスにたくさんのポイントを描く必要があり、かなり時間がかかります。私のコードは次のようになります：

var points = getPoints() // Array of {x,y,color}
var ctx = canvas.getContext("2d");

for (var i = 0; i < points.length; i++) {
   ctx.fillStyle = points[i].color
   ctx.beginPath()
   ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true)
   ctx.fill() }

これをスピードアップするために、どのようなパフォーマンスの調整ができるのだろうかと思っています。色は5色しかありません。たとえば、ポイントリストをオンザフライで並べ替えて、ポイントctx.fillStyleごとに1回ではなく、5回だけ変更することでメリットが得られますか？

4

1 に答える 1

17

たとえば、オンザフライでポイント リストを並べ替えて、ポイントごとに 1 回ではなく 5 回だけ ctx.fillStyle を変更するメリットはありますか?

私の経験では、はい -.fillStyle頻繁に変更すると非常にコストがかかります。

キャンバスに多数の四角形をプロットするコードがあり、頻繁に変化する色を多く使用してプロットするよりも、まれにしか変化しない 2 つの色だけで四角形をプロットする時間が大幅に短縮されました。

とにかく、あなたは5つの異なる色しか持っていないので:

  1. 5 つの円を描画できるオフスクリーン キャンバスを作成する
  2. .drawImage()アーク座標を再計算することなく、目的のキャンバスに適切なカラー サークルをブリットするために使用します。
  3. points[i]ループ内でローカル変数に代入して、何度も逆参照しないようにします。

私のラップトップでは、このコードは 400x400 のキャンバスに 7 ミリ秒で 3000 個の円を描画しています。

var colours = ['red', 'green', 'blue', 'yellow', 'magenta'];
var n = colours.length;
var r = 10;
var d = r * 2;

var off = document.createElement('canvas');
off.width = n * d;
off.height = d;
var ctx = off.getContext('2d');  

for (var i = 0; i < n; ++i) {
    ctx.fillStyle = colours[i];
    ctx.beginPath();
    ctx.arc(i * d + r, r, r, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
}

var canvas = document.getElementById('canvas');
var ctx2 = canvas.getContext('2d');
var t0 = Date.now();
for (var i = 0; i < 3000; ++i) {
    var c = Math.floor(n * Math.random());
    var x = Math.floor(canvas.width * Math.random());
    var y = Math.floor(canvas.height * Math.random());
    ctx2.drawImage(off, c * d, d, d, x - r, y - r, d, d);
}
var t1 = Date.now();
alert((t1 - t0) + "ms");

http://jsfiddle.net/alnitak/Dpgts/を参照してください。

于 2012-12-17T14:45:35.383 に答える