本文實例為大家分享了JavaScript Canvas繪制動態線框效果的具體代碼，供大家參考，具體內容如下

本周項目，移動端頁面開發，要求豐富的動效，主要技術實現 Canvas ；其中繪制動態線框，走了點彎路，所謂的彎路是邏輯問題，非技術實現方式。

一、涉及技術點，具體如下：

1.html 中引入canvas 標簽，設置寬高；

<canvas width=xx height=xx>您的瀏覽器不支持canvas，請更換版本</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初始節點開始lineTo到每一個節點，項目需求是繪制線條的動畫效果，那實現方式就是在每一條直線段間，通過定時器多次重回moveTo起點到lineTo直線段上有序增量的點位，代碼如下：

ctx.moveTo(x1,y3);xm1+=fre1;ym1+=fre2;ctx.lineTo(xm1,ym1)二、邏輯彎路及解決

1、邏輯彎路

項目是移動端，考慮適配問題，在繪制節點的時候，開始使用的是以百分比與獲取屏幕后的寬高的乘積做為判斷moveTo更改的true or false; 鑒于乘積的非整數，在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;function drawUpBox(){ ctx.beginPath(); ctx.strokeStyle=lg01; ctx.lineWidth=0.05*rem; if(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) }else if(xm1>x1&&ym1<=y2){ctx.moveTo(x2,y1);xm1-=fre;ym1+=fre;ctx.lineTo(xm1,ym1) }else if(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) } else if(ym1<y4){ctx.moveTo(x1,y3);xm1+=fre;ym1+=fre;ctx.lineTo(xm1,ym1) }else if(xm1>=x2&&ym1>=y4){if(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)} } if(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); }else if(xm2<x6&&ym1<=yd2){ctx.moveTo(x5,yd1);xm2+=fre;ym2+=fre;ctx.lineTo(xm2,ym2) }else if(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) }else if(ym2<yd4){ctx.moveTo(x6,yd3);xm2-=fre;ym2+=fre;ctx.lineTo(xm2,ym2) }else if(xm2<=x5&&ym2>=yd4){if(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)}else{ drawOuterAndInnerLine(); clearInterval(timer01)} } ctx.stroke(); ctx.closePath()}

效果：

如果更改fre增量的值，比如改為4，就會出現如下邊框不完整問題：

2.解決方案：

在判斷語句中，橫向100等分，節點即為100以內整數值，增量也以此累加，moveTo 和 lineTo的時候 再換算成具體px; 通過百分值，可以提高單位時間的繪制效率，此時只需控制增量每次++；再配合定時器 的周期，很容易實現不同頻率的線條繪制；另外對節點封裝于一個對象內，可以快速調整節點繪制不同尺寸 類型的動態線框圖：

canvas3.width=winW;canvas3.height=.15*winH;//$(’#canvas3’).css(’background’,’#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);function drawMainBox3(){ drawPath(ctx3,node3X.x4*winWB,node3Y.y1Ready,4,winWB,lg03) drawPath(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(node3X.x3*winWB,node3Y.y1*winCHB)ctx3.lineTo(xml3*winWB,node3Y.y1*winCHB); }else if(xml3>node3X.x1&&yml3Ready<node3Y.y2Ready){xml3--;yml3Ready=node3Y.y1*winCHB+(node3X.x2-xml3)*winWB;ctx3.moveTo(node3X.x2*winWB,node3Y.y1*winCHB)ctx3.lineTo(xml3*winWB,yml3Ready) }else if(xml3==node3X.x1&&yml3<node3Y.yh){yml3++;ctx3.moveTo(node3X.x1*winWB,node3Y.y2Ready);ctx3.lineTo(node3X.x1*winWB,node3Y.y2Ready+yml3*winCHB); }else if(yml3==node3Y.yh&&xml3<node3X.x2){xml3++;ctx3.moveTo(node3X.x1*winWB,node3Y.y3Ready);ctx3.lineTo(xml3*winWB,node3Y.y3Ready+(xml3-node3X.x1)*winWB) }else if(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){xmr3++;ctx3.moveTo(node3X.x4*winWB,node3Y.y1*winCHB)ctx3.lineTo(xmr3*winWB,node3Y.y1*winCHB); }else if(xmr3<node3X.x6&&ymr3Ready<node3Y.y2Ready){xmr3++;ymr3Ready=node3Y.y1*winCHB+(xmr3-node3X.x5)*winWB;ctx3.moveTo(node3X.x5*winWB,node3Y.y1*winCHB)ctx3.lineTo(xmr3*winWB,ymr3Ready) }else if(xmr3==node3X.x6&&ymr3<node3Y.yh){ymr3++;ctx3.moveTo(node3X.x6*winWB,node3Y.y2Ready);ctx3.lineTo(node3X.x6*winWB,node3Y.y2Ready+ymr3*winCHB); }else if(ymr3==node3Y.yh&&xmr3>node3X.x5){xmr3--;ctx3.moveTo(node3X.x6*winWB,node3Y.y3Ready);ctx3.lineTo(xmr3*winWB,node3Y.y3Ready+(node3X.x6-xmr3)*winWB) }else if(xmr3<=node3X.x5&&xmr3>50){xmr3--;ctx3.moveTo(node3X.x5*winWB,node3Y.y4Ready);ctx3.lineTo(xmr3*winWB,node3Y.y4Ready); }else{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);clearInterval(mainBoxTimer3); } ctx3.stroke(); ctx3.closePath();}

技術實現是基礎，邏輯優化是提升，是質量和效率的提升。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。