canvas动画教程,canvas 连线
前言：画布动画入门系列之简单连线动画。虽然简单，但连线动画应用场景还挺多，因此做了个小演示，一通百通。
step1：绘制点
首先创建个标签画布id=画布/canvas
设置几个点的坐标
常数点=[ [200,100],//上[300, 200], //右[100, 200], //左[200, 100], //上[200, 300], //下[100, 200], //左[300, 200], //右[200, 300] ];const canvas=文档。查询选择器(“画布”)；康斯特CTX=帆布。获取上下文(“2d”)；然后把点给画出来
points.forEach(([x，y])={ drawDot(x，y)；});函数drawDot(x1，y1，r){ CTX。save()；CTX。begin path()；//不写会和线连起来ctx.fillStyle= red//绘制成矩形ctx.arc(x1，y1，r？r : 2，0，2 *数学.)；CTX。fill()；CTX。restore()；}step2：绘制线条
我们封装一个方法，传入起点终点，绘制一根线条
函数drawLine(x1，y1，x2，y2){ CTX。save()；CTX。begin path()；//不写每次都会重绘上次的线ctx。createlanegradient(x1，y1，x2，y2)；ctx.moveTo(x1，y1)；ctx.lineTo(x2，y2)；CTX。关闭路径()；ctx.strokeStyle=rgba(255，255，255，1)；CTX。笔画()；CTX。restore()；}step3：线条动画
这里面需要计算两点之间的斜率，然后x坐标每次挪动一单位，已知斜率和x偏移，即可计算出y的偏移。值得注意的是，这个坐标系和数学中的正常男性染色体组型坐标系有点不一样，y轴是反的。然后可以引入额外的参数速度控制速度
函数线移动(点){ if(点。长度2){ return；} const [[x1，y1]，[x2，y2]]=点；设dx=x2-x1；设dy=y2-y1；如果(数学。ABS(dx)1数学。ABS(dy)1){ points=点数。切片(1)；线移动(点数);返回；}设x=x1，y=y1//线条绘制过程中的终点if (dx===0) { (x=x2)，(y=(speed * dy)/math。ABS(dy))；} else if(dy===0){ x=(speed * dx)/math。ABS(dx)；y=y2} else if(数学。ABS(dx)=1){ let rate=dy/dx；x=(速度* dx)/数学。ABS(dx)；y=(速度*速率* dx)/数学。ABS(dx)；} drawLine(x1，y1，x，y)；points[0]=[x，y]；窗户。requestanimationframe(function(){ line move(points))；});}主要代码就这么多，先看效果
完整代码
！DOCTYPE html lang= en head meta charset= UTF-8 /meta name= viewport content= width=设备宽度，initial-scale=1.0 /meta http-equiv= X-UA-Compatible content= ie=edge /title canvas-连线动画/标题/床头画布id= canvas 宽度= 400 高度= 400 /canvas script//起点：10,20 终点：150,200常量点=[ [200,100],//上[300, 200], //右[100, 200], //左[200, 100], //上[200, 300], //下[100, 200], //左[300, 200], //右[200, 300] ];const canvas=文档。查询选择器(“画布”)；康斯特CTX=帆布。获取上下文(“2d”)；//const img=new Image()；恒定速度=10;//速度//img。onload=function(){//canvas。宽度=img。宽度；//画布。身高=img。身高；动画(CTX)；//};//img.src= ./imgs/demo。png ；函数动画(CTX){//CTX。绘制图像(img，0，0)；ctx.fillRect(0，0，canvas.width，canvas。身高)；points.forEach(([x，y])={ drawDot(x，y)；});线移动(点数);}函数线移动(点){ if(点。长度2){ return；} const [[x1，y1]，[x2，y2]]=点；设dx=x2-x1；设dy=y2-y1；如果(数学。ABS(dx)1数学。ABS(dy)1){ points=点数。切片(1)；线移动(点数);返回；}设x=x1，y=y1//线条绘制过程中的终点if (dx===0) { (x=x2)，(y=(speed * dy)/math。ABS(dy))；} else if(dy===0){ x=(speed * dx)/math。ABS(dx)；y=y2} else if(数学。ABS(dx)=1){ let rate=dy/dx；x=(速度* dx)/数学。ABS(dx)；y=(速度*速率* dx)/数学。ABS(dx)；} drawLine(x1，y1，x，y)；points[0]=[x，y]；窗户。requestanimationframe(function(){ line move(points))；});}函数drawLine(x1，y1，x2，y2){ CTX。save()；CTX。begin path()；//不写每次都会重绘上次的线ctx。createlanegradient(x1，y1，x2，y2)；ctx.moveTo(x1，y1)；ctx.lineTo(x2，y2)；CTX。关闭路径()；ctx.strokeStyle=rgba(255，255，255，1)；CTX。笔画()；CTX。restore()；}函数drawDot(x1，y1，r){ CTX。save()；CTX。begin path()；//不写会和线连起来ctx.fillStyle= red//绘制成矩形ctx.arc(x1，y1，r？r : 2，0，2 *数学.)；CTX。fill()；CTX。restore()；}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。