JavaScript Canvas draws dynamic wireframe effect

JavaScript Canvas draws dynamic wireframe effect

This article shares the specific code of JavaScript Canvas drawing dynamic wireframe effect for your reference. The specific content is as follows

This week's project is mobile page development, which requires rich dynamic effects. The main technology is Canvas. In drawing the dynamic wireframe, we took a detour. The so-called detour is a logical problem, not a technical implementation method.

1. The technical points involved are as follows:

1. Introduce the canvas tag in html and set the width and height;

<canvas id="canvas" width=xx height=xx>Your browser does not support canvas, please change the version</canvas>

2. Define ctx–beginPath–moveTo-lineTo-stroke–closePath in js;

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();

Drawing a static polyline is relatively simple. It starts from the initial node of moveTo and moves to each node directly. The project requirement is to draw the animation effect of the line. The implementation method is to use the timer to return to the orderly increment points on the lineTo straight line segment from the starting point of moveTo multiple times between each straight line segment. The code is as follows:

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

2. Logical detours and solutions

1. Logical detour

The project is a mobile terminal. Considering the adaptation problem, when drawing nodes, the product of percentage and the width and height of the screen is used as the true or false judgment of moveTo change; since the product is a non-integer, the incremental change of x and y in the if statement can only use ++; and the increment is in px units, so the drawing speed is very slow, even if the time of setInterval is in milliseconds.

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()
}

Effect:

If you change the value of the fre increment, for example to 4, the following incomplete border problem will occur:

2.Solution:

In the judgment statement, the horizontal division is 100 equal parts, and the nodes are integer values ​​within 100. The increments are accumulated accordingly and converted into specific px during moveTo and lineTo. The drawing efficiency per unit time can be improved by using percentage values. At this time, you only need to control the increment ++ each time. Combined with the timer cycle, it is easy to achieve line drawing with different frequencies. In addition, the nodes are encapsulated in an object, and the nodes can be quickly adjusted to draw dynamic wireframes of different sizes and types:

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;
    //Draw the left half 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);
    }
    //Draw the right halfif(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();

}

Technical implementation is the foundation, and logical optimization is the improvement, which is the improvement of quality and efficiency.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JS realizes the menu effect when the mouse slides over the display border
  • JavaScript to automatically change the table border color
  • js+css rounded border TAB tab sliding door code sharing (2 models)

<<:  IIS7 IIS8 reverse proxy rule writing, installation and configuration method

>>:  Analysis of Mysql data migration methods and tools

Recommend

Front-end JavaScript Promise

Table of contents 1. What is Promise 2. Basic usa...

Mysql query database capacity method steps

Query the total size of all databases Here’s how:...

ERROR 1045 (28000): Access denied for user ''root''@''localhost'' (using password: YES) Practical solution

There was no problem connecting to the database y...

How to use localStorage in JavaScript

If you are a developer looking to get into the wo...

Docker implements container port binding local port

Today, I encountered a small problem that after s...

MySQL character set garbled characters and solutions

Preface A character set is a set of symbols and e...

The difference between delete, truncate, and drop and how to choose

Preface Last week, a colleague asked me: "Br...

How to wrap HTML title attribute

When I was writing a program a few days ago, I wan...

Click on the anchor link in JS to scroll smoothly and adjust to the top position freely

Click on the anchor link to scroll smoothly and a...

JS ES new features: Introduction to extension operators

1. Spread Operator The spread operator is three d...

MAC+PyCharm+Flask+Vue.js build system

Table of contents Configure node.js+nvm+npm npm s...

How to use macros in JavaScript

In languages, macros are often used to implement ...

Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

Table of contents 1. Parent component passes valu...

Example of how to embed H5 in WeChat applet webView

Preface WeChat Mini Programs provide new open cap...

About installing python3.8 image in docker

Docker Hub official website 1. Search for Python ...