扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript Canvas绘制动态线框效果
  • 512

0
分享到

JavaScript Canvas绘制动态线框效果

2024-04-02 19:04:59 512人浏览 泡泡鱼
摘要

本文实例为大家分享了javascript canvas绘制动态线框效果的具体代码，供大家参考，具体内容如下 本周项目，移动端页面开发，要求丰富的动效，主要技术实现 Canvas ；其

本文实例为大家分享了javascript canvas绘制动态线框效果的具体代码，供大家参考，具体内容如下

本周项目，移动端页面开发，要求丰富的动效，主要技术实现 Canvas ；其中绘制动态线框，走了点弯路，所谓的弯路是逻辑问题，非技术实现方式。

一、涉及技术点，具体如下：

1.html 中引入canvas 标签，设置宽高；


<canvas id="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();

}

技术实现是基础，逻辑优化是提升，是质量和效率的提升。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript Canvas绘制动态线框效果

本文链接: https://lsjlt.com/news/132779.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript Canvas绘制动态线框效果
    本文实例为大家分享了JavaScript Canvas绘制动态线框效果的具体代码，供大家参考，具体内容如下 本周项目，移动端页面开发，要求丰富的动效，主要技术实现 Canvas ；其...
    99+
    2024-04-02
  • JavaScript canvas实现动态点线效果
    本文实例为大家分享了JavaScript canvas实现动态点线效果的具体代码，供大家参考，具体内容如下 效果预览 1.实现效果 画彩色点 相近的点产生连线 ...
    99+
    2024-04-02
  • Canvas怎么绘制浮动球效果
    这篇文章主要介绍了Canvas怎么绘制浮动球效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。原效果 实现效果之前对svg有过很多接触, canvas知道也可以做到...
    99+
    2023-06-09
  • JavaScript利用canvas绘制流星雨效果
    目录前言需求分析实现过程1.绘制满天繁星2.满天繁星闪起来3.绘制流星4.流星划过夜空5.流星雨6.merge视觉盛宴前言 最近总是梦见一些小时候的故事，印象最深刻的就是夏天坐在屋顶...
    99+
    2022-11-13
    JavaScript canvas绘制流星雨 JavaScript canvas 流星雨 JavaScript 流星雨
  • JavaScript canvas绘制动态圆环进度条
    本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码，供大家参考，具体内容如下 由于使用的是vue开发，所以就展示一下绘制函数好了，上图是效果图 dr...
    99+
    2024-04-02
  • HTML5 canvas怎么绘制酷炫能量线条效果
    这篇文章主要讲解了“HTML5 canvas怎么绘制酷炫能量线条效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML5 canvas怎么绘制酷炫能量线...
    99+
    2024-04-02
  • JavaScript使用canvas绘制坐标和线
    本文实例为大家分享了JavaScript使用canvas绘制坐标和线的具体代码，供大家参考，具体内容如下 具体代码如下: <!DOCTYPE html> <ht...
    99+
    2024-04-02
  • HTML5中怎么使用Canvas动态绘制心型线和玫瑰线
    本篇内容主要讲解“HTML5中怎么使用Canvas动态绘制心型线和玫瑰线”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5中怎么使用Canvas动态绘制心...
    99+
    2024-04-02
  • javascript实现移动的模态框效果
    本文实例为大家分享了javascript实现移动的模态框效果的具体代码，供大家参考，具体内容如下 页面效果： 点击链接后，弹出登录模态框，点击关闭链接可以关闭模态框，鼠标在模态框标题...
    99+
    2024-04-02
  • 怎么用HTML5 canvas绘制玫瑰花效果
    本篇内容介绍了“怎么用HTML5 canvas绘制玫瑰花效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！...
    99+
    2024-04-02
  • JS+Canvas实现动态时钟效果
    基于Canvas制作的动态时钟demo，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <m...
    99+
    2024-04-02
  • Android实现动态曲线绘制
    我们在安卓开发中，有时会用到统计图表的功能，而曲线绘制是其中比较典型的一种，一般是利用给定的坐标点集和安卓自带的绘图模块进行绘制，直接得到的是一张完整的静态的曲线图。但有时，我们需要...
    99+
    2024-04-02
  • CSS3怎么绘制一个小雨滴动态效果
    本篇内容介绍了“CSS3怎么绘制一个小雨滴动态效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！第一步通过...
    99+
    2024-04-02
  • Python绘制1000响大地红鞭炮动态效果
    目录1、视频帧采样2、将图片转为字符画2.1 创建像素-字符索引2.2 将图片逐像素转换为字符3、将字符图像合成视频4、完整代码新年新气象，今天就用代码来制作一个 动态鞭炮 ，效果如...
    99+
    2023-01-03
    Python鞭炮 Python绘制鞭炮 Python大地红鞭炮
  • JS前端使用canvas动态绘制函数曲线示例详解
    目录前言第一步：绘制坐标系1、如何确定 x 轴和 y 轴的边界值2、不是传入多少网格数就是多少网格3、如何让坐标原点位于画布中心4、刻度总是会有浮点数第二步：画函数曲线第三步：绘制辅...
    99+
    2022-11-13
    JS canvas绘制函数曲线 JS canvas
  • Android使用Canvas绘制圆形进度条效果
    前言 Android自定义控件经常会用到Canvas绘制2D图形，在优化自己自定义控件技能之前，必须熟练掌握Canvas绘图机制。本文从以下三个方面对Canvas绘图机制进行讲...
    99+
    2022-06-06
    进度条 canvas Android
  • html5如何使用canvas绘制太阳系效果
    这篇文章主要为大家展示了“html5如何使用canvas绘制太阳系效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html5如何使用canvas绘制太阳系效果...
    99+
    2024-04-02
  • HTML5中canvas如何绘制的玫瑰花效果
    这篇文章主要为大家展示了“HTML5中canvas如何绘制的玫瑰花效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML5中canvas如何绘制的玫瑰花效果...
    99+
    2024-04-02
  • 使用canvas怎么绘制一个烟花效果
    这期内容当中小编将会给大家带来有关使用canvas怎么绘制一个烟花效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。目录结构目录结构大致如下我们将烟花分为两个阶段，一个是未炸开持续上升时期，另一个是炸开后...
    99+
    2023-06-09
  • Flutter怎么用Canvas绘制精美表盘效果
    这篇“Flutter怎么用Canvas绘制精美表盘效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Flutter怎么用Ca...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作