vue 中使用canvas画简单的线条动画效果

vue 中使用canvas画简单的线条动画效果；
问题：1.没有写X轴或者Y轴不变的逻辑判断；2.不会画弧度，不知道弧线怎么去单个像素的画。

method中定义方法：

getCanvas(start,end){return new Promise(resolve=>{let movingDistance_x = end.x - start.x; //x轴需要移动的距离let movingDistance_y = end.y - start.y; //y轴需要移动的距离let ratio = movingDistance_y / movingDistance_x; // 斜率// 画线的方法let draw_lineTo = (start_draw,end_draw)=>{this.ctx.beginPath()this.ctx.lineCap="round";this.ctx.lineJoin="round";this.ctx.miterLimit=1;this.ctx.moveTo(start_draw.x,start_draw.y)this.ctx.lineTo(end_draw.x,end_draw.y)this.ctx.lineWidth = 4this.ctx.strokeStyle = 'rgb(32,83,131)'this.ctx.stroke()if(Math.abs(end_draw.x - end.x) == 0 ){resolve()return}start_position = end_drawend_position = getEnd_position(start_position)console.log(Math.abs(end_draw.x - end.x),start_position,end_position)setTimeout(() => {draw_lineTo(start_position,end_position)}, 10);}// 获取开始坐标let start_position = { x : start.x, y : start.y}// 获取结束坐标的方法let getEnd_position = (start_position)=>{let x = end.x > start.x ? (start_position.x + 1) : (start_position.x - 1)let y =end.x > start.x? start_position.y + ratio: start_position.y - ratio;return { x : x , y : y }}// 获取结束坐标let end_position = getEnd_position(start_position)// 画线draw_lineTo(start_position,end_position)})}

mounted中调用

this.ctx = this.$refs.myCanvas.getContext('2d')this.$nextTick(()=>{(async () =>{await this.getCanvas({x:706,y:402},{x:660,y:375})await this.getCanvas({x:598,y:374},{x:534,y:410})await this.getCanvas({x:534,y:410},{x:468,y:374})// 分叉this.getCanvas({x:468,y:374},{x:554,y:321}) .then(()=>{this.getCanvas({x:554,y:321},{x:518,y:296})})await this.getCanvas({x:468,y:374},{x:241,y:503})await this.getCanvas({x:241,y:503},{x:23,y:377})this.getCanvas({x:23,y:377},{x:62,y:352})})()})

vue 中使用canvas画简单的线条动画效果相关推荐

canvas画圆和线条动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
在vue中使用canvas实现简单特效（下雨天）
效果展示还不了解canvas的同学可以先看一下官方的api https://www.canvasapi.cn 话不多说直接上代码在页面中添加canvas标签 <template>< ...
Android 中通过Canvas 与线程结合实现动画效果
前段时间在公司做了一个模块,不使用第三方动画效果类,直接通过Canvas 进行图像的绘制,并通过Thread实现动画的效果该模块主要是实现车辆运行时候的道路运行效果,在进行实施前做了一个相关的Dem ...
html5制作线路图,HTML5使用canvas画简单电路图
何问起 var canvas = document.getElementById("canHewenqi"); var cxt = canvas.getContext(" ...
简单的Canvas刮刮乐带动画效果的实例
今天做了个刮刮乐领奖品的小活动,感觉挺有用的,整理在这儿记录下上个效果图先: 加了个简单的 css 动画效果下面贴上主要代码: index.html <!DOCTYPE html> & ...
Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
【Canvas】js用canvas绘制一个钟表时钟动画效果
学习JavaScript的看过来,有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,旋转角度绘图这个重点掌握到了吗,这里有一个例子,如何用canvas画钟表时钟动图效果, ...
html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...
php3D动画,html5的canvas实现几何模型3D运动动画效果
html5的canvas实现几何模型3D运动动画效果 JS片段: var {atan2,sqrt,sin,cos,PI,acos} = Math; function project3D(x,y,z,v ...

vue 中使用canvas画简单的线条动画效果

vue 中使用canvas画简单的线条动画效果相关推荐

最新文章

热门文章