4

以下のコードはマーキーラインをアニメーション化します。アニメーションはかなり速く始まりますが、時間の経過とともに著しく遅くなります。理由を理解するのを手伝ってください。同じコードがここにあります：http：//jsbin.com/aleqef/

編集：アニメーションループ中に新しいオブジェクトを作成しません。すべてがキャッシュされているようです。つまり、パターン、コンテキストなどです。疑わしいものは何も表示されません。メモリの問題のように見えますが、理由はわかりません。

var data = [
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAcSURBVHjaYmBgYGBkZAQSYAjlgUXgYhAeQIABAAGkABPpfLrFAAAAAElFTkSuQmCC",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAeSURBVHjaYmBkAEEgYGRkBBEgFgMDRBTGA8sBBBgAAaQAE03fiAgAAAAASUVORK5CYII=",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURQAAAP///6XZn90AAAAdSURBVHjaYmBgZGRkYGAAY0YGCITxoHIQUYAAAwABpAATvSsONQAAAABJRU5ErkJggg=="
];

var context = document.getElementById("canvas").getContext("2d");
var count = data.length;
var patterns = [];
var pattern = 0;

function onload(e) {
  patterns.push(context.createPattern(e.target, "repeat"));
}

function draw() {
  for (var angle = 0; angle < 360; angle += 5) {
    var rad = (angle * Math.PI) / 180;
    var x = 200 * Math.cos(rad);
    var y = 200 * Math.sin(rad);

    context.moveTo(0, 0);
    context.lineTo(x, y);
  }
}

function animate() {
  window.setTimeout(animate, 1000 / 60);

  if (patterns.length > 0) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    draw();
    context.lineWidth = 1;
    context.strokeStyle = patterns[pattern];
    context.stroke();
    pattern = (pattern + 1) % patterns.length;
  }
}

for (var i = 0; i < count; i++) {
  var image = new Image();
  image.onload = onload;
  image.src = data[i];
}

animate();

4

1 に答える 1

4

この変更を試してください (beginPath())

if (patterns.length > 0) {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    draw();

リンクhttp://jsbin.com/aleqef/4/edit#preview

于 2012-04-19T18:17:18.650 に答える