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 を応援していただければ幸いです。

以下もご興味があるかもしれません: