私の理解が正しければ、いくつかの静的オブジェクトを一度だけ描画してから、各フレームでアニメーション化されたオブジェクトを描画するだけで済みます。
まず第一に、あなたはメソッドとメソッドを完全に誤解してsaveおりrestore、Michael Geary がその理由を示しました。また、markE はtoDataURLいつでもキャンバスのスナップショットを取り、画像オブジェクトに保存する方法を教えてくれます。これは強力な機能ですが、単純なアニメーションに本当に必要なものではありません。
では、静的オブジェクトと動的オブジェクトを使用してアニメーションを作成するにはどうすればよいでしょうか?
静的オブジェクトと動的オブジェクトを使用してアニメーションを作成する方法
主なオプションは 2 つあります。
- 1 つのキャンバスを使用して、すべてのオブジェクト (静的および動的) をアニメーションのフレームごとに描画します。これは、ほとんどのオブジェクトが静的であるため、おそらく最適ではありません。
- 静的オブジェクト用のキャンバスと動的オブジェクト用の別のキャンバスを用意します。この手法を使用すると、静的オブジェクトを 1 回だけ描画し、そこで忘れる必要があり (キャンバスを「復元」する必要はありません)、別のキャンバスでアニメーション (フレームごとに動的オブジェクトを描画する) を実行します。
オプション 2 が最適だと思います。
複数のキャンバスをレイヤーとして使用する
divCSS を使用して、すべてのキャンバスを親タグ内の (0,0) の絶対位置に設定します。
また、CSS を使用してキャンバスの z-index を設定します。z-index プロパティは、要素のスタック順序を指定します。z-index 値が低いアイテムは、z-index 値が高いアイテムの後ろに表示されます。
キャンバスを適切に定義したので、遊んでみましょう!
デモ
必要なアニメーションを実現する方法を示すために、jsFiddle を作成しました。
フィドルをチェック
そのフィドルで使用されるコード：
HTML:
<div id="canvasesdiv">
<canvas id="static" width=400 height=400>This text is displayed if your browser does not support HTML5 Canvas</canvas>
<canvas id="dynamic" width=400 height=400>This text is displayed if your browser does not support HTML5 Canvas</canvas>
</div>
CSS:
#canvasesdiv {
position:relative;
width:400px;
height:300px;
}
#static {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#dynamic {
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
Javascript:
// static canvas
var static = document.getElementById("static");
var staticCtx = static.getContext("2d");
// dynamic canvas
var dynamic = document.getElementById("dynamic");
var dynamicCtx = dynamic.getContext("2d");
// animation status
var FPS = 30;
var INTERVAL = 1000 / FPS;
// our background
var myStaticObject = {
x: 0,
y: 0,
width: static.width,
height: static.height,
draw: function () {
staticCtx.fillStyle = "rgb(100, 100, 0)";
staticCtx.fillRect(0, 0, static.width, static.height);
}
};
// our bouncing rectangle
var myDynamicObject = {
x: 30,
y: 30,
width: 50,
height: 50,
gravity: 0.98,
elasticity: 0.90,
friction: 0.1,
velX: 10,
velY: 0,
bouncingY: false,
bouncingX: false,
draw: function () { // example of dynamic animation code
// clear the last draw of this object
dynamicCtx.clearRect(this.x - 1, this.y - 1, this.width + 2, this.height + 2);
// compute gravity
this.velY += this.gravity;
// bounce Y
if (!this.bouncingY && this.y >= dynamic.height - this.height) {
this.bouncingY = true;
this.y = dynamic.height - this.height;
this.velY = -(this.velY * this.elasticity);
} else {
this.bouncingY = false;
}
// bounce X
if (!this.bouncingX && (this.x >= dynamic.width - this.width) || this.x <= 0) {
this.bouncingX = true;
this.x = (this.x < 0 ? 0 : dynamic.width - this.width);
this.velX = -(this.velX * this.elasticity);
} else {
this.bouncingX = false;
}
// compute new position
this.x += this.velX;
this.y += this.velY;
// render the object
dynamicCtx.fillStyle = "rgb(150, 100, 170)";
dynamicCtx.fillRect(this.x, this.y, this.width, this.height);
}
};
function drawStatic() {
myStaticObject.draw();
// you can add more static objects and draw here
}
function drawDynamic() {
myDynamicObject.draw();
// you can add more dynamic objects and draw here
}
function animate() {
setInterval(function () {
// only need to redraw dynamic objects
drawDynamic();
}, INTERVAL);
}
drawStatic(); // draw the static objects
animate(); // entry point for animated (dynamic) objects