Question

我正在研究一个canvas元素，我想我会添加一些简单的图形元素，但由于某种原因，他们正在研究fps停止。没有它们是60fps，它们在运行的一分钟内就会减慢到3-4 fps：

ctx.rect(0, 0, cnv.width, cnv.height);
ctx.fillStyle = ctx.createPattern(albImg[8], "repeat");
ctx.fill();

ctx.lineWidth="1";
ctx.strokeStyle="#5d92de";
ctx.rect(173.5,638.5,623,98);
ctx.stroke();

我做错了什么？

Answer 1

每次新动画循环时动画都会变慢

@DanielBengtsson，是的，正如您所发现的，请使用strokeRect。

或者，您可以在ctx.rect之前添加ctx.beginPath。发生的事情是，自上一个beginPath以来所有以前的rects都被重绘，所以你在动画时真正绘制了数百个rects。

// alternative with beginPath so previous rects will not redraw and
//     cause slowdowns.
ctx.lineWidth="1";
ctx.strokeStyle="#5d92de";
ctx.beginPath();
ctx.rect(173.5,638.5,623,98);
ctx.stroke();

重复背景图案 - 在尝试使用之前等待图像完全加载

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/emoticon1.png";

function start() {
  ctx.fillStyle = ctx.createPattern(img, "repeat");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

＆＃13;

#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

javascript中的内存泄漏很大

1 个答案: