Canvas は Wave Progress Chart を実装します (デモ付き)

今回は、Wave 進行表の Canvas 実装 (デモ付き) をお届けします。 Wave 進行表の Canvas 実装に関する 注意点 について、実際のケースを見てみましょう。

この記事では、HTML5 Canvas のクールなビッグウェーブ進捗グラフ効果を紹介します。詳細は次のとおりです:

上の図でわかるように、この記事は上記の効果を実現するためのものです。

AlloyTouch は最近、プルダウン更新を使用してクールなローディング効果を記述する必要があるためです。したがって、大きな波の進行図が好まれます。

まず、Big Wave Picture Progress コンポーネントをカプセル化する必要があります。基本原理は、Canvas を使用して ベクター グラフィックス と画像素材を描画し、波の効果を合成することです。

quadraticCurveTo について

quadraticCurveTo() メソッドは、2 次ベジェ曲線を表す指定された制御点を使用して、現在のパスに点を追加します。

JavaScript 構文:

context.quadraticCurveTo(cpx,cpy,x,y);

パラメータ値

cpx ベジェ制御点のx座標

cpy ベジェ制御点のy座標

x 終点のx座標

y終点 y 座標

は次のとおりです:

ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

上記のコードを通じて 2 次ベジェ曲線を描くことができます。具体的な原理効果を以下の図に示します。

波を描いてみてください。

var waveWidth = 300,
    offset = 0,
    waveHeight = 8,
    waveCount = 5,
    startX = -100,
    startY = 208,
    progress = 0,
    progressStep = 1,
    d2 = waveWidth / waveCount,
    d = d2 / 2,
    hd = d / 2,
    c = document.getElementById("myCanvas"),
    ctx = c.getContext("2d");
function tick() {
    offset -= 5;
    progress += progressStep;
    if (progress > 220 || progress < 0) progressStep *= -1;
    if (-1 * offset === d2) offset = 0;
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.beginPath();
    var offsetY = startY - progress;
    ctx.moveTo(startX - offset, offsetY);
    for (var i = 0; i < waveCount; i++) {
        var dx = i * d2;
        var offsetX = dx + startX - offset;
        ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
        ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
    }
    ctx.lineTo(startX + waveWidth, 300);
    ctx.lineTo(startX, 300);
    ctx.fill();
    requestAnimationFrame(tick);
}
tick();

波の無限の動きを見ることができます:

ここで重要なのは、スイング補正画像を隠すために描画領域がキャンバスよりも大きいことです。上では 200200 のキャンバスが使用されています。

コードを複製して、大きなキャンバスに描画してみると、理解できるでしょう。

ここでは、if (-1 offset === d2) offset = 0; によって無限ループが実装されています。

d2は波の山+波の谷の長さです。波の山+波の谷があれば、また同じ

ライフサイクル

が始まりますが、これは0からスタートするのと同じなので、0にリセットすることができます。

globalCompositeOperationを理解する

globalCompositeOperation

プロパティ

キャンバスに描画された色が、キャンバス上にすでに存在する色とどのように組み合わされるかを説明します。 大きな波の進行状況チャートを描画するには、次を使用します:

ctx.globalCompositeOperation = "destination-atop";

destination-atop 意味: キャンバス上の既存のコンテンツは、新しい形状と重なる部分にのみ保持されます。新しい形状はコンテンツの後に描画されます。

もちろん、globalCompositeOperation にはここにリストされていない多くのオプションがありますが、クールなオーバーレイ効果を調整するために他のプロパティを設定してみることもできます。

全体的な実装

var img = new Image();
function tick() {
    ...
    ...
    ctx.fill();
    ctx.globalCompositeOperation = "destination-atop";
    ctx.drawImage(img, 0, 0);
    requestAnimationFrame(tick);
}
img.onload = function () {
    tick();
};
img.src = "asset/alloy.png";

コードをシンプルかつ直接的にするために、ここでローダーコードをカプセル化する必要はなく、新しい Image を介して src を直接設定してイメージをロードします。

ベクター画像を描画した後、globalCompositeOperationを設定してからペンギン画像を描画します。描画順序を間違えてはいけません。

最後に

例のダウンロード: デモ

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ページングクエリの使用方法の詳細な説明

文字と数学関数の関係

以上がCanvas は Wave Progress Chart を実装します (デモ付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。