0

私はキャンバスが初めてで、DOM (HTML+JS) アニメーションをキャンバスに移動したいと考えていました。Basic animations - Web API Interfaces |太陽系のアニメーションを真似てみました。MDNと私はそれを行うことができました。フィドル。

に関して問題がありglobalCompositeOperationます。アニメーションでは、地球が影を落としています (不透明度の低い長方形)。月がこの暗い領域を周回しているとき、月は影の長方形の下にあるはずです。私が使用する場合

context.globalCompositeOperation = 'destination-over';

関数の上部でdraw、意図した結果 ( fiddle ) が得られますが、月と地球は軌道線の下で回転します。私はそれをしたくありません。地球と月の両方が軌道線の上にあり、月が影の四角形の下にあるようにします。それを行う方法はありますか？そうでなければ、影を取り除かなければなりません。

元のアニメーションでは使用されていますが、コードでは使用context.save()しませんでした。context.restore()私は彼らに詳しくありません。私の問題に関連している可能性があります...

var sun = {
  radius	: 80,
  x		: 0,
  y		: 0,
};
var earth = {
  radius	: 20,
  x		: sun.radius + 80,
  y		: 0,
  angle	: 0,
};
var moon = {
  radius	: 8,
  x		: 50,
  y		: 0,
  angle	: 0,
};

function draw() {
  var canvas	= document.getElementById("canvas");
  var context	= canvas.getContext("2d");

  context.resetTransform();
  context.clearRect(0, 0, canvas.width, canvas.height)
  context.translate(canvas.width/2, canvas.height/2);

  // sun
  context.beginPath();
  context.arc(0, 0, sun.radius, 0, 360 * Math.PI/180, false);
  context.fillStyle = "yellow";
  context.fill();

  // sun orbit
  context.beginPath();
  context.arc(0, 0, earth.x, 0, Math.PI*2, false);
  context.strokeStyle = "rgba(180,150,0,.25)";
  context.stroke();

  // earth
  earth.angle += .2;
  if (earth.angle == 360) {
    earth.angle = 0;
  }
  context.globalCompositeOperation = 'source-over'; // earth is above the sun and its orbit
  context.rotate(earth.angle * Math.PI/180);
  context.translate(earth.x, 0);
  context.beginPath();
  context.arc(0, 0, earth.radius, 0, 360*(Math.PI/180), false);
  context.fillStyle = "royalblue";
  context.fill();
  context.globalCompositeOperation = 'destination-over'; // earth's orbit and shadow are below the earth

  // earth shadow
  context.fillStyle = "rgba(0,0,0,0.1)";
  context.fillRect(0, -earth.radius, earth.radius*16, earth.radius*2);

  // earth orbit
  context.beginPath();
  context.arc(0, 0, moon.x, 0, Math.PI*2, false);
  context.strokeStyle = "rgba(0,0,200,.2)";
  context.stroke();

  // moon
  moon.angle += 1;
  if (moon.angle == 360) {
    moon.angle = 0;
  }
  context.globalCompositeOperation = 'source-over'; // moon is above the earth's orbit and shadow
  context.rotate(moon.angle * Math.PI/180);
  context.translate(moon.x, 0);
  context.beginPath();
  context.arc(0, 0, moon.radius, 0, 360 * Math.PI/180, false);
  context.fillStyle = "silver";
  context.fill();

  requestAnimationFrame(draw);
}

draw();
html {
  background: rgb(230,230,230);
}
canvas {
  background: white;
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 0 5px rgba(0,0,0,.1);
}
<canvas id="canvas" width="640" height="480"></canvas>

4

1 に答える 1

0

コード内の順序を少し変更する必要があるだけです。この場合、複合モードは実際には必要ありません。

  • 太陽や地球の軌道などのすべての静的要素は、一度レンダリングして、たとえば背景として要素に設定できます。
  • 最初に月の軌道を描く
  • 月を二番目に描く
  • 3番目に影を描く
  • 最後に地球を描きます。

今回のアップデートでは回転などの再計算はせず、セーブ/リストアを使いました。

var sun = {
    radius	: 80,
    x		: 0,
    y		: 0,
};
var earth = {
    radius	: 20,
    x		: sun.radius + 80,
    y		: 0,
    angle	: 0,
};
var moon = {
    radius	: 8,
    x		: 50,
    y		: 0,
    angle	: 0,
};

var canvas	= document.getElementById("canvas");
var context	= canvas.getContext("2d");

context.setTransform(1,0,0,1,canvas.width/2, canvas.height/2);

// sun
context.beginPath();
context.arc(0, 0, sun.radius, 0, 360 * Math.PI/180, false);
context.fillStyle = "yellow";
context.fill();

// sun orbit
context.beginPath();
context.arc(0, 0, earth.x, 0, Math.PI*2, false);
context.strokeStyle = "rgba(180,150,0,.25)";
context.stroke();

canvas.style.backgroundImage = "url(" + canvas.toDataURL() + ")";

function draw() {

    context.setTransform(1,0,0,1,0,0);    
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.setTransform(1,0,0,1,canvas.width/2, canvas.height/2);
    
    // earth
    earth.angle += .2;
    if (earth.angle == 360) {
        earth.angle = 0;
    }
    context.rotate(earth.angle * Math.PI/180);
    context.translate(earth.x, 0);

        // earth orbit
    context.beginPath();
    context.arc(0, 0, moon.x, 0, Math.PI*2, false);
    context.strokeStyle = "rgba(0,0,200,.2)";
    context.stroke();
    
    // moon
    context.save();
    moon.angle += 1;
    if (moon.angle == 360) {
        moon.angle = 0;
    }
    context.rotate(moon.angle * Math.PI/180);
    context.translate(moon.x, 0);
    context.beginPath();
    context.arc(0, 0, moon.radius, 0, 360 * Math.PI/180, false);
    context.fillStyle = "silver";
    context.fill();
    context.restore();

    // earth shadow
    context.fillStyle = "rgba(0,0,0,0.1)";
    context.fillRect(0, -earth.radius, earth.radius*16, earth.radius*2);

    context.beginPath();
    context.arc(0, 0, earth.radius, 0, 360*(Math.PI/180), false);
    context.fillStyle = "royalblue";
    context.fill();
    
    
    requestAnimationFrame(draw);
}

draw();
html {
    background: rgb(230,230,230);
}
canvas {
    background: white;
    border: 1px solid rgba(0,0,0,.2);
    box-shadow: 0 0 5px rgba(0,0,0,.1);
}
    <canvas id="canvas" width="640" height="480"></canvas>

于 2015-03-14T20:42:49.160 に答える