Canvas 绘制动态效果线框

最新推荐文章于 2024-08-14 03:10:22 发布

袁森Simon

最新推荐文章于 2024-08-14 03:10:22 发布

阅读量7.3k

点赞数 2

分类专栏： html5 文章标签： canvas

本文链接：https://blog.csdn.net/simonyuan100/article/details/52202386

版权

本文介绍了在移动端页面开发中使用Canvas绘制动态线框的过程与遇到的问题。通过JavaScript的ctx方法实现线框的动画效果。在适配过程中，初始采用百分比计算导致绘制速度慢，解决方案是将横轴100等分，用整数值控制增量，提高绘制效率。通过封装节点对象，可以灵活调整线框的动态效果，体现了技术实现与逻辑优化的重要性。

摘要由CSDN通过智能技术生成

本周项目，移动端页面开发，要求丰富的动效，主要技术实现 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.