canvas 动画线段(canvas简单连线动画的实现代码)
类别:Web前端 浏览量:1627
时间:2021-10-10 00:14:31 canvas 动画线段
canvas简单连线动画的实现代码前言:canvas动画入门系列之简单连线动画。虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通。
step1:绘制点
首先创建个标签<canvas id="canvas"></canvas>
设置几个点的坐标
const points = [ [200, 100], //上 [300, 200], //右 [100, 200], //左 [200, 100], //上 [200, 300], //下 [100, 200], //左 [300, 200], //右 [200, 300] ]; const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d");
然后把点给画出来
points.forEach(([x, y]) => { drawDot(x, y); }); function drawDot(x1, y1, r) { ctx.save(); ctx.beginPath(); //不写会和线连起来 ctx.fillStyle = "red"; //绘制成矩形 ctx.arc(x1, y1, r ? r : 2, 0, 2 * Math.PI); ctx.fill(); ctx.restore(); }
step2:绘制线条
我们封装一个方法,传入起点终点,绘制一根线条
function drawLine(x1, y1, x2, y2) { ctx.save(); ctx.beginPath(); //不写每次都会重绘上次的线 ctx.lineCap = "round"; ctx.lineJoin = "round"; var grd = ctx.createLinearGradient(x1, y1, x2, y2); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.closePath(); ctx.strokeStyle = "rgba(255,255,255,1)"; ctx.stroke(); ctx.restore(); }
step3:线条动画
这里面需要计算两点之间的斜率,然后x坐标每次挪动±1单位,已知斜率和x偏移,即可计算出y的偏移。值得注意的是,这个坐标系和数学中的xy坐标系有点不一样,y轴是反的。然后可以引入额外的参数speed控制速度
function lineMove(points) { if (points.length < 2) { return; } const [[x1, y1], [x2, y2]] = points; let dx = x2 - x1; let dy = y2 - y1; if (Math.abs(dx) < 1 && Math.abs(dy) < 1) { points = points.slice(1); lineMove(points); return; } let 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 (Math.abs(dx) >= 1) { let rate = dy / dx; x += (speed * dx) / Math.abs(dx); y += (speed * rate * dx) / Math.abs(dx); } drawLine(x1, y1, x, y); points[0] = [x, y]; window.requestAnimationFrame(function() { lineMove(points); }); }
主要代码就这么多,先看效果
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>canvas-连线动画</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> //起点:10,20 终点:150,200 const points = [ [200, 100], //上 [300, 200], //右 [100, 200], //左 [200, 100], //上 [200, 300], //下 [100, 200], //左 [300, 200], //右 [200, 300] ]; const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // const img = new Image(); const speed = 10; //速度 // img.onload = function() { // canvas.width = img.width; // canvas.height = img.height; animate(ctx); // }; // img.src = "./imgs/demo.jpg" alt="canvas 动画线段(canvas简单连线动画的实现代码)" border="0" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- canvas绘制图形方法(如何使用canvas绘制可移动网格的示例代码)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- 使用canvas画个正方形(canvas小画板之平滑曲线的实现)
- canvas如何调试(关于canvas.toDataURL 在iOS运行失败的问题解决)
- canvas 动画线段(canvas简单连线动画的实现代码)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- canvas怎么获取内容(详解canvas.toDataURL报错的解决方案全都在这了)
- canvas图片显示报错(html2canvas生成的图片偏移不完整的解决方法)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- canvas图片裁剪(使用canvas压缩图片上传的方法示例)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
- 《乡村爱情13》开播,新版刘能以假乱真,编剧思维进入瓶颈(新版刘能以假乱真)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9