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データ移行方法とツールの分析

推薦する

Alibaba Cloud イメージリポジトリの Docker 構成変更の実装

docker リポジトリ自体は非常に遅いですが、中国の Alibaba Cloud ミラー リポジト...

MySQL マスタースレーブレプリケーションのいくつかのレプリケーション方法の概要

非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...

アップロード画像コントロールを実現するネイティブ js

この記事の例では、アップロード画像コントロールを実装するためのjsの具体的なコードを参考までに共有し...

MySQL におけるデータベース間関連クエリメソッド

ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...

JavaScript の一般的なステートメント ループ、判定、文字列から数値

目次1. スイッチ2. whileループ3. Do/Whileループ3. 文字列を数値に変換する1....

Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明

目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...

MySQL の NOT IN 充填ピットの NULL 列の問題の解決方法

以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...

jQuery はシャッター効果を実現します (li 配置を使用)

この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体...

CentOS ベースの OpenStack 環境の展開に関する詳細なチュートリアル (OpenStack のインストール)

エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...

データベースSQL文の最適化

最適化する理由:実際のプロジェクトが開始され、データベースが一定期間稼働した後、初期のデータベース設...

mysql ワイルドカード (sql 高度なフィルタリング)

目次まず、値の一部と一致させるために使用される特殊文字であるワイルドカードについて簡単に紹介します。...

Mysql5.7 で JSON 操作関数を使用する手順

序文JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ています...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

JavaScriptのループの違いについての詳細な説明

目次序文列挙可能なプロパティ反復可能なオブジェクトforEachメソッドとmapメソッドチェーン呼び...

JavaScript データのフラット化の詳細な説明

目次フラット化とは何か再帰トストリング減らすアンダーコア_.平坦化_。連合_。違い要約するフラット化...