アプリ版：「スタンプのみでお礼する」機能のリリースについて

JavaScript canvas グラデーションをアニメーションしたい

解決済

  • 質問者：零礼
  • 質問日時：
  • 回答数：6件

イラストとグラデーションを作成したのですが、グラデーションの色を流れているように動かすにはどうしたら宜しいでしょうか？
グラデーションのライブラリもあるらしいのですが、それを使わずにソースコードを記述する方法が知りたいです。

下記は作成したソースコードになります。


<html>
<head>
<meta charset="utf-8">
</head>
<body>

<canvas id="line" width="450" height="450"></canvas>

<script>
var line_canvas = document.getElementById("line");
var line_ctx = line_canvas.getContext("2d");

var grad = line_ctx.createLinearGradient(0,0,360,240);
grad.addColorStop(0 ,'blue');
grad.addColorStop(0.5, 'aqua');
grad.addColorStop(1, 'gray');

line_ctx.strokeStyle = grad;
line_ctx.beginPath();
line_ctx.moveTo(100,-100);
line_ctx.lineTo(0,200);
line_ctx.lineTo(100,200);
line_ctx.lineTo(50,400);
line_ctx.lineTo(200,150);
line_ctx.lineTo(80,150);
line_ctx.lineTo(67,0);
line_ctx.stroke();
line_ctx.fillStyle = grad;
line_ctx.fill();


</script>
</body>
</html>

質問者からの補足コメント

  • 回答ありがとうございます。

    イメージとして下記URLの上から3番目ソースコードになります。
    グラデーションの中で色が少しずつ変化するようにしたいです。
    分かりづらく申し訳ございませんでした。

    Canvas×グラデーション×アニメーション2（granim.js）；
    https://apricot-design.com/staffblog/%E3%80%90%E …

    でもこれだと、やはりライブライリを使用して作成しているみたいです。
    ライブライリじゃないとこのような表現は実現できないのでしょうか？

    宜しくお願い致します。

    No.2の回答に寄せられた補足コメントです。 補足日時：2020/11/26 20:19
    通報する

  • 回答ありがとうございます。

    下記URLの上から3番目のソースコードのようにしたいです。
    グラデーションの色の中で少しずつ色が変化している。

    Canvas×グラデーション×アニメーション2（granim.js）
    https://apricot-design.com/staffblog/%E3%80%90%E …

    SVGもアニメーションが出来る存在として名前だけは知っていますが詳しくは知りません。
    できましたら後学の為に教えて頂けないでしょうか？

    No.1の回答に寄せられた補足コメントです。 補足日時：2020/11/26 20:22
    通報する

  • やってみましたが、グラデーションが動きません。
    何が原因なのでしょうか。
    宜しくお願い致します。

    function drawFrame() {

    var makeColor = (rad) => 'hsl('+ rad + '180, 100%, 50%)';
    var grad = line_ctx.createLinearGradient(0,0,360,240);
    grad.addColorStop(0.0, makeColor(180));
    grad.addColorStop(1.0, makeColor(180 + 30));
    lctx.strokeStyle = grad;

    以下略~~(描画)
    makeColor = (210 + 10) % 360;
    }
    var makeColor = 0;
    setInterval(drawFrame, 33);

    No.3の回答に寄せられた補足コメントです。 補足日時：2020/12/01 12:17
    通報する

  • 回答ありがとうございます。

    頑張っては見たのですが、理解が追い付きませんので、
    教えて頂けないでしょうか？

    宜しくお願い致します。

    No.5の回答に寄せられた補足コメントです。 補足日時：2020/12/02 09:41
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

参考程度に

No.6ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No5です。



＞理解が追い付きませんので、～
アニメーションの基本的な仕組みを理解できていないのではないかと懸念します。
いきなり色の変更を行うよりも、No2で示したような、単純な移動などをまず試しに作ってみるのが宜しいように思います。
わからないままでいろいろいじっても、結局のところ、行き詰まるのがオチですから。

canvasを利用するにしても、
　・図形が移動するアニメーション
　・図形が回転するアニメーション
　・図形が変形してゆくアニメーション
　・上記の複合
などができれば、色の変更もその延長にありますので、理解しやすくなるはずと思います。

以下のサイトに、一般的なアニメーションの考え方の説明とサンプルがいくつか出ていますので、まずは、このあたりから始めてみるのが良いのではないでしょうか？
https://developer.mozilla.org/ja/docs/Web/Guide/ …

ついでながら、(canvasではなく)HTML要素のアニメーションであれば、最近はCSSだけでもかなりのことができるようになってきています。


おまけとして、No3様の考えを利用させていただいて、お遊び的にアニメーションする例を以下に。
（適当に書いてしまったので、わかりやすくはないと思いますがご容赦）
制御変数はdegひとつだけです。複数にすれば、より複雑なことも可能になるでしょう。
（図形は簡単な三角形に変えてあります。）
※ IEはアロー関数に対応していないため動作しません。

<script>
{
const canvas = document.getElementById("line"),
ctx = canvas.getContext("2d"),
HSLcolor = (d) => 'hsl('+ d + 'deg, 100%, 60%)';

let cw = canvas.clientWidth,
ch = canvas.clientHeight,
u = Math.min(cw / 200, ch / 200);
ctx.translate(cw / 2, ch / 2);
ctx.scale( u, -u);
cw /= u * 2; ch /= u * 2;


let drawFrame = (d)=>{
let rad = (d * Math.PI / 180);
ctx.clearRect(-cw, -ch, cw * 2, ch * 2);

ctx.save();
ctx.rotate( -rad / 2);
let grad = ctx.createLinearGradient(
-100 * Math.sin(rad * 1.5), 100 * Math.cos(rad * 1.5),
100 * Math.sin(rad * 1.5), -100 * Math.cos(rad * 1.5)
);
grad.addColorStop(0, HSLcolor(d / 7));
grad.addColorStop(1, HSLcolor(d / 7 + 90));
ctx.fillStyle = grad;

ctx.beginPath();
ctx.moveTo(30, 90);
ctx.lineTo(-30,-20);
ctx.lineTo(40,-70);
ctx.fill();
ctx.restore();
}

let deg = 0;
setInterval(()=>{ deg %= 5040; drawFrame(deg++); }, 30);
}
</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
まだわからないことだらけですが、頑張って勉強してみます。
教えて頂きありがとうございます。

通報する
お礼日時：2020/12/06 20:09

No.5

  • 回答者： fujillin
  • 回答日時：

No4です。



よこからですが・・・
＞グラデーションが動きません。
何も色を変えずに、まったく同じものを何度も描画しているだけだからです。

＞var grad = line_ctx.createLinearGradient(0,0,360,240);
＞grad.addColorStop(0.0, makeColor(180));
＞grad.addColorStop(1.0, makeColor(180 + 30));
上記を何度実行したところで、同じ色の図形を繰り返し上書きするだけですよね？
ですので、「静止画像のアニメーション」をやっていることになってしまっています。
色相部分の角度を変化さてあげれば色がは変わってゆくはずです。
（明度・彩度等を変えても良いですけれど…）
No3様の回答をよく見直せばわかるはずと思います。

ついでながら、
＞makeColor = (210 + 10) % 360;
関数を上書きしちゃっているので、下手をすれば妙なことになりかねません。
（今回の場合は、たまたま毎回再定義されていて、結果的に無視される形になっていて、影響はありませんけれど）

＞var makeColor = 0;
makeColorはdrawFrame内の関数のはずですけれど、何か変な勘違いをしていませんか？（変数のスコープをよく考えてみましょう）
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： fujillin
  • 回答日時：

No2です。



スマホからなので、ハッキリと確認はできませんでしたが、図形の形は変わらずにグラデーションの色が変わってゆくという感じでしょうか？

＞ライブライリじゃないとこのような表現は実現できないのでしょうか？
ライブラリを利用すれば記述が簡単になるという利点はありますが、利用しなければできないということはありません。
なぜなら、ライブラリの内容もjavascriptで記述されているからです。

No2の例は、消去する範囲を移動してゆく例ですが、始まりの位置（h）の値を少しずつ変化させることでアニメーションに見せています。
アニメーションの基本的な方法はここで示した通りですが、変化させる対象を変えることで、図形を移動させたり、色を変えたりすることも可能になります。

グラデーションのカラーを変化させたければ、LinearGradient.addColorStopの部分を少しずつ変えながら毎回設定し直して、同じ図形を描き直すようにすることで実現することができます。
（No2の例の、消去する部分は不要となります。）

また、その際には、色名表示を使うと計算に乗らないので、RGB値など、数値で表せる形式の色指定を用いる方が色の微妙な変化も設定できますし、何よりも計算値として扱えるのでアニメーションをしやすくなります。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： Ogre7077
  • 回答日時：

グラデーションの色を流れているように動かす、のであれば


描画フレーム毎に使用する色を変えましょう。

// 色相をパラメータ化して、フレーム毎に色を変える例
function drawFrame() {
_ ...
_ var makeColor = (rad) => 'hsl(' + rad + 'deg,100%,50%)';
_ var grad = ctx.createLinearGradient( ... );
_ grad.addColorStop(0.0, makeColor(現在の色相));
_ grad.addColorStop(1.0, makeColor(現在の色相+30));
_ ctx.strokeStyle = grad;
_ ... // ctx を使って描画
_ 現在の色相 = (現在の色相 + フレーム毎の加算度数) % 360;
}
var 現在の色相 = 0; // 描画パラメータの初期値
setInterval(drawFrame, 33); // 30fps
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
補足だと短いのでこちらにて失礼します。

教えて頂いた内容を元に作成しました。
図形とグラデーションは表示されるのですが、グラデーションが動的に動いて変化しません。
エラーは出ておらず原因がわかりません。

改めて宜しくお願い致します。

<script>
var line_canvas = document.getElementById("line");
var line_ctx = line_canvas.getContext("2d");

function drawFrame() {
var makeColor = (rad) => 'hsl('+ rad + '180, 100%, 50%)';
var grad = line_ctx.createLinearGradient(0,0,360,240);
grad.addColorStop(0.0, makeColor(180));
grad.addColorStop(1.0, makeColor(180 +30));
line_ctx.strokeStyle = grad;

line_ctx.beginPath();
line_ctx.moveTo(100,-100);
line_ctx.lineTo(0,200);
line_ctx.lineTo(100,200);
line_ctx.lineTo(50,400);
line_ctx.lineTo(200,150);
line_ctx.lineTo(80,150);
line_ctx.lineTo(67,0);
line_ctx.stroke();
line_ctx.fillStyle = grad;
line_ctx.fill();

makeColor = (210 + 10) % 360;
}
var makeColor = 0;
setInterval(drawFrame, 33);

</script>
</body>

通報する
お礼日時：2020/12/01 15:02

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



どのようなアニメーションになさりたいのか不明ですが、ブラウザでのアニメーションの仕組みは（ご存知とは思いますが）基本的にパラパラ漫画と似たような方法です。
一方で、canvasで描いた図形は固定の絵と同じです。
オブジェクトの様には扱えませんので、上から描き加えたり（消したり）するか、もう一度描きなおすなどの方法で、少しずつ変化させる必要があります。
（これに対して、SVGによる図形はオブジェクトとして扱えるので、それぞれの図形を単独で動かすようなことも可能になります。ご参考まで）


以下は、ごく単純に、上から少しずつ描画されていくようなアニメーションの例です。
（図にグラデーションがかかっているので、一旦全部を描画してから消す方法を取っています）

<script>
let canvas = document.getElementById("line");
let ctx = canvas.getContext("2d");
let i, id, h = 1, ch = canvas.clientHeight;

let grad = ctx.createLinearGradient(0,0,360,240);
grad.addColorStop(0 ,'blue');
grad.addColorStop(0.5, 'aqua');
grad.addColorStop(1, 'gray');

const data = [[0,200],[100,200],[50,400],[200,150],[80,150],[67,0]];
ctx.fillStyle = grad;

id = setInterval(()=>{
ctx.beginPath();
ctx.moveTo(100,-100);
for(i=0; i<data.length; i++) ctx.lineTo(data[i][0],data[i][1]);
ctx.fill();
ctx.clearRect(0, h, 450, ch);
if(h>=ch) clearInterval(id);
h += 3;
}, 30);
</script>


※ 上記の例の様な矩形のアニメーションなら、実は、何度も描き直すような方法を取らなくても実現できます。
canvasをdiv要素などで包含しておいて、そのdivにoverflow:hiddenを設定しておき、divの高さをアニメーションで変える方法をとるほうが遥かに簡単です。
こちらの方法であれば、CSSアニメーションでも実現できるでしょう。
※ 実際に、どのようなアニメーションをなさりたいのか不明でしたので、プリミティブな方法を例として示しておきました。
※ もしも、グラデーションの方向にあわせて順に表示してゆきたいとかであるなら、消すときに座標をグラデーションの向きに回転しから矩形で消すと簡単になると思います。
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

具体的にどんな動作を想定しているのでしょうか？


SVGとかでもよいですか？
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報