JavaScript Canvas は動的なワイヤーフレーム効果を描画します

JavaScript Canvas は動的なワイヤーフレーム効果を描画します

この記事では、JavaScript Canvasの動的なワイヤーフレーム効果を描画する具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

今週のプロジェクトは、豊富な動的効果を必要とするモバイルページの開発です。主な技術は Canvas です。動的ワイヤーフレームを描く際に、迂回しました。いわゆる迂回は論理的な問題であり、技術的な実装方法ではありません。

1. 関係する技術的なポイントは次のとおりです。

1. HTML にキャンバス タグを導入し、幅と高さを設定します。

<canvas id="canvas" width=xx height=xx>ブラウザはキャンバスをサポートしていません。バージョンを変更してください</canvas>

2. js で ctx–beginPath–moveTo-lineTo-stroke–closePath を定義します。

var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle=#f00;
ctx.lineWidth=1;
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(..)..
ctx.stroke();
ctx.closePath();

静的ポリラインの描画は比較的簡単です。moveTo の最初のノードから開始し、各ノードに直接移動します。プロジェクトの要件は、線のアニメーション効果を描画することです。実装方法は、タイマーを使用して、各直線セグメント間で、moveTo の開始点から lineTo 直線セグメント上の整然とした増分ポイントに複数回戻ることです。コードは次のとおりです。

ctx.moveTo(x1,y3);
xm1+=fre1;
ym1+=fre2;
ctx.lineTo(xm1,ym1)

2. 論理的な迂回と解決策

1. 論理的な迂回

このプロジェクトはモバイル端末です。適応問題を考慮して、ノードを描画するときに、パーセンテージと画面の幅と高さの積をmoveTo変更の真偽判定として使用します。積は整数ではないため、if文のxとyの増分変更には++しか使用できません。増分はpx単位であるため、setIntervalの時間がミリ秒単位であっても、描画速度は非常に遅くなります。

var lg01=ctx.createLinearGradient(0,.12*winH,0,.5*winH);
lg01.addColorStop(0,'#6DEAFF');
lg01.addColorStop(.5,'#78C7FF');
lg01.addColorStop(1,'#4A84FF');
var fre=4;
関数drawUpBox(){
    ctx.beginPath();
    ctx.strokeStyle=lg01;
    ctx.lineWidth=0.05*rem;
    xm1>x2&&ym1==y1の場合{
        ctx.clearRect(x2,y1-0.025*rem,x3-x2,0.05*rem);
        ctx.moveTo(x3,y1);
        xm1-=fre;
        ctx.lineTo(xm1,ym1)
    }そうでなければ(xm1>x1&&ym1<=y2){
        ctx.moveTo(x2,y1);
        xm1-=fre;
        ym1+=fre;
        ctx.lineTo(xm1,ym1)
    }そうでなければ(xm1<=x1&&ym1<y3){
        ctx.clearRect(x1-0.025*rem,y2,0.05*rem,y3-y2)
        ctx.moveTo(x1,y2);
        ym1+=fre;
        ctx.lineTo(xm1,ym1)
    } そうでなければ(ym1<y4){
        ctx.moveTo(x1,y3);
        xm1+=fre;
        ym1+=fre;
        ctx.lineTo(xm1,ym1)
    }そうでなければ(xm1>=x2&&ym1>=y4){

        xm1<=winW/2の場合{
            ctx.clearRect(x1,y4-0.025*rem,winH/2-x1,0.05*rem);
            ctx.moveTo(x2,y4)
            xm1+=fre;
            ctx.lineTo(xm1,ym1)
        }
    }
    xm2<x5&&ym2==yd1の場合{
        ctx.clearRect(x4,yd1-0.025*rem,x5-x4,0.05*rem);
        ctx.moveTo(x4,yd1);
        xm2+=fre;
        ctx.lineTo(xm2,ym2);
    }そうでなければ(xm2<x6&&ym1<=yd2){
        ctx.moveTo(x5,yd1);
        xm2+=fre;
        ym2+=fre;
        ctx.lineTo(xm2,ym2)
    }そうでなければ(xm2<=x6&&ym2<yd3){
        ctx.clearRect(x6-0.025*rem,yd2,0.05*rem,yd3-yd2)
        ctx.moveTo(x6,yd2);
        ym2+=fre;
        ctx.lineTo(xm2,ym2)
    }そうでない場合(ym2<yd4){
        ctx.moveTo(x6,yd3);
        xm2-=fre;
        ym2+=fre;
        ctx.lineTo(xm2,ym2)
    }そうでなければ(xm2<=x5&&ym2>=yd4){

        xm2>=winW/2の場合{
            ctx.clearRect(winW/2,yd4-0.025*rem,x6-winW/2,0.05*rem);
            ctx.moveTo(x5,yd4)
            xm2-=fre;
            ctx.lineTo(xm2,ym2)
        }それ以外{
            外側と内側の線を描画します。
            クリアインターバル(タイマー01)
        }
    }
    ctx.stroke();
    ctx.closePath()
}

効果:

fre 増分の値を、たとえば 4 に変更すると、次の不完全な境界の問題が発生します。

2.解決策:

判定文では、水平分割は100等分で、ノードは100以内の整数値です。増分はそれに応じて累積され、moveToおよびlineTo中に特定のpxに変換されます。パーセンテージ値を使用すると、単位時間あたりの描画効率が向上します。このとき、毎回増分++を制御するだけで済みます。タイマーサイクルと組み合わせると、異なる周波数の線描画を簡単に実現できます。また、ノードはオブジェクトにカプセル化されており、ノードをすばやく調整して、さまざまなサイズとタイプの動的なワイヤーフレームを描画できます。

キャンバスの幅をwinWに設定します。
キャンバスの高さを .15*winH に設定します。
//$('#canvas3').css('背景','#eee');
var node3X={x1:20,x2:22,x3:36,x4:64,x5:78,x6:80};
var node3Y = {y1:2、yh:20};
var xd=node3X.x2-node3X.x1、xml3=node3X.x3、xmr3=node3X.x4、yml3=ymr3= 0;
//var winWB=winW/100,winHB=winH/100,winCHB=winHB/2;
node3Y.y1Ready = node3Y.y1 * winCHB;
node3Y.y2Ready=node3Y.y1*winCHB+(node3X.x2-node3X.x1)*winWB;
node3Y.y3Ready=node3Y.y2Ready+node3Y.yh*winCHB;
node3Y.y4Ready=node3Y.y3Ready+(node3X.x2-node3X.x1)*winWB;
var yml3Ready = node3Y.y1Ready;
var ymr3Ready = node3Y.y1Ready;
var ctx3 = canvas3.getContext("2d");
var lg03=ctx3.createLinearGradient(0,0,0,canvas3.height);
lg03.addColorStop(0,'#6DEAFF');
lg03.addColorStop(.5,'#78C7FF');
lg03.addColorStop(1,'#4A84FF');
var mainBoxTimer3=setInterval(drawMainBox3,20);
関数drawMainBox3(){
    描画パス(ctx3,node3X.x4*winWB,node3Y.y1Ready,4,winWB,lg03)
    描画パス(ctx3,node3X.x3*winWB,node3Y.y1Ready,4,winWB,lg03)
    ctx3.beginPath();
    ctx3.strokeStyle=lg03;
    ctx3.lineWidth=.1*rem;
    //左半分を描画します if(xml3>node3X.x2&&yml3==0){
        //ctx3.clearRect(0,0,winW,winH/2);
        xml3--;
        ctx3.moveTo(ノード3X.x3*winWB、ノード3Y.y1*winCHB)
        ctx3.lineTo(xml3*winWB、node3Y.y1*winCHB);
    }そうでない場合、(xml3>node3X.x1&&yml3Ready<node3Y.y2Ready){
        xml3--;
        yml3Ready=node3Y.y1*winCHB+(node3X.x2-xml3)*winWB;
        ctx3.moveTo(ノード3X.x2*winWB、ノード3Y.y1*winCHB)
        ctx3.lineTo(xml3*winWB、yml3Ready) を使います。
    }それ以外の場合(xml3==node3X.x1&&yml3<node3Y.yh){
        yml3++;
        ctx3.moveTo(node3X.x1*winWB、node3Y.y2Ready);
        ctx3.lineTo(node3X.x1*winWB、node3Y.y2Ready+yml3*winCHB);
    }そうでない場合、yml3==node3Y.yh&&xml3<node3X.x2){
        xml3++;
        ctx3.moveTo(node3X.x1*winWB、node3Y.y3Ready);
        ctx3.lineTo(xml3*winWB、node3Y.y3Ready+(xml3-node3X.x1)*winWB) です。
    }それ以外の場合(xml3>=node3X.x2&&xml3<50){
        xml3++;
        ctx3.moveTo(node3X.x2*winWB、node3Y.y4Ready);
        ctx3.lineTo(xml3*winWB、node3Y.y4Ready);
    }
    //右半分を描画if(xmr3<node3X.x5&&ymr3==0){
        xml3++;
        ctx3.moveTo(ノード3X.x4*winWB、ノード3Y.y1*winCHB)
        ctx3.lineTo(xmr3*winWB、node3Y.y1*winCHB);
    }そうでない場合(xmr3<node3X.x6&&ymr3Ready<node3Y.y2Ready){
        xml3++;
        ymr3Ready=node3Y.y1*winCHB+(xmr3-node3X.x5)*winWB;
        ctx3.moveTo(ノード3X.x5*winWB、ノード3Y.y1*winCHB)
        ctx3.lineTo(xmr3*winWB、ymr3Ready) を呼び出します。
    }そうでない場合(xmr3==node3X.x6&&ymr3<node3Y.yh){
        ymr3++;
        ctx3.moveTo(node3X.x6*winWB、node3Y.y2Ready);
        ctx3.lineTo(node3X.x6*winWB、node3Y.y2Ready+ymr3*winCHB);
    }そうでない場合(ymr3==node3Y.yh&&xmr3>node3X.x5){
        xmr3--;
        ctx3.moveTo(node3X.x6*winWB、node3Y.y3Ready);
        ctx3.lineTo(xmr3*winWB、node3Y.y3Ready+(node3X.x6-xmr3)*winWB) です。
    }そうでない場合(xmr3<=node3X.x5&&xmr3>50){
        xmr3--;
        ctx3.moveTo(node3X.x5*winWB、node3Y.y4Ready);
        ctx3.lineTo(xmr3*winWB、node3Y.y4Ready);
    }それ以外{
        ctx3.clearRect(0,0,canvas3.width,canvas3.height);
        ctx3.beginPath();
        ctx3.moveTo(node3X.x3*winWB、node3Y.y1Ready);
        ctx3.lineTo(node3X.x2*winWB、node3Y.y1Ready);
        ctx3.lineTo(node3X.x1*winWB、node3Y.y2Ready);
        ctx3.lineTo(node3X.x1*winWB、node3Y.y3Ready);
        ctx3.lineTo(node3X.x2*winWB、node3Y.y4Ready);
        ctx3.lineTo(node3X.x5*winWB、node3Y.y4Ready);
        ctx3.lineTo(node3X.x6*winWB、node3Y.y3Ready);
        ctx3.lineTo(node3X.x6*winWB、node3Y.y2Ready);
        ctx3.lineTo(node3X.x5*winWB、node3Y.y1Ready);
        ctx3.lineTo(node3X.x4*winWB、node3Y.y1Ready);
        mainBoxTimer3 の間隔をクリアします。
    }
    ctx3.ストローク();
    ctx3.closePath();

}

技術的な実装が基礎であり、論理的な最適化が改善であり、品質と効率の向上です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSは、マウスがディスプレイの境界線をスライドしたときにメニュー効果を実現します。
  • テーブルの境界線の色を自動的に変更するJavaScript
  • js+css 丸い境界線 TAB タブ スライドドア コード共有 (2 モデル)

<<:  IIS7 IIS8 リバースプロキシルールの記述、インストール、構成方法

>>:  MySQLデータ移行方法とツールの分析

推薦する

Linux CentOS 6.5 ifconfig が IP を照会できない問題の解決方法

最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...

CentOS 6 および 7 での MySQL 5.7 の詳細なインストール チュートリアル

開発には常にデータが必要です。サーバーとしての Linux では、テスト データを格納するためのデー...

MySQLのスロークエリの詳細な説明

MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...

nginx を介してローカルでリバースプロキシを構成するプロセス全体

序文Nginx は、イベント駆動型の非同期非ブロッキング処理フレームワークを使用する軽量 HTTP ...

202 無料の高品質 XHTML テンプレート (1)

ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...

CentOS7 での PostgreSQL 11 の詳細なインストールと設定のチュートリアル

1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...

W3C チュートリアル (4): W3C XHTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

経験者のHTMLの書き方と理由の分析

1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...

MySQL の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

MySQL で group by を使用すると常にエラー 1055 が発生します (推奨)

MySQL で group by を使用すると常にエラー 1055 が発生するため、原因を確認する...

macOS での MySQL 8.0.16 のインストールと設定のグラフィック チュートリアル

この記事では、macOSでのMySQL 8.0.16のインストールと設定のチュートリアルを参考までに...

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...

優れたユーザー エクスペリエンス デザイナーが行うべき 5 つのこと (画像とテキスト)

この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...

ネイティブ JavaScript を使用して計算機のサンプル コードを開発する

計算機の主な機能は数値計算を実行することです。計算機機能の Web インスタンスを開発すると、js ...