canvas-绘制轨迹

最新推荐文章于 2024-04-08 20:58:26 发布
最新推荐文章于 2024-04-08 20:58:26 发布
阅读量6.3k 收藏 8
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyuyully/article/details/81346537
版权

主要是根据给的坐标，把线连接起来：

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="1000 " height="1000"></canvas>
       <script>
	  var c=document.getElementById( "canvas");
	  var ctx=c.getContext( "2d");
      var piece=[{ startX : 0.0 , startY : 0.0 , endX : 100.0 , endY : 100.0 },{ startX : 100.0 , startY : 100.0 , endX : 220.0 , endY : 100.0 },{ startX : 220.0 , startY : 100.0 , endX : 220.0 , endY : 230.0 },{ startX : 220.0 , startY : 230.0 , endX : 0.0000000000000141 , endY : 230.0000000000001 },{ startX : 0.0 , startY : 0.0 , endX : 0.0000000000000141 , endY : 230.0000000000001 },{ startX : 89.77207522026764 , startY : 219.6621288974165 , endX : 36.69454011741072 , endY : 100.5705109272744 },{ startX : 36.69454011741072 , startY : 100.5705109272744 , endX : 70.74427940665509 , endY : 124.0886031218738 },{ startX : 70.74427940665509 , startY : 124.0886031218738 , endX : 89.77207522026764 , endY : 219.6621288974165 },{ startX : 0.0000000000000141 , startY : 230.0000000000001 , endX : 69.7234725280814 , endY : 306.9712386802853 },{ startX : 69.7234725280814 , startY : 306.9712386802853 , endX : 141.9502699288459 , endY : 252.2175956681772 },{ startX : 141.9502699288459 , startY : 252.2175956681772 , endX : 249.04518081075 , endY : 340.9848627654174 },{ startX : 249.04518081075 , startY : 340.9848627654174 , endX : 382.2911677076281 , endY : 255.1211990907436 },{ startX : 382.2911677076281 , startY : 255.1211990907436 , endX : 355.7249920716332 , endY : 143.1251162048193 },{ startX : 355.7249920716332 , startY : 143.1251162048193 , endX : 315.0455293755986 , endY : 242.6771915985073 },{ startX : 315.0455293755986 , startY : 242.6771915985073 , endX : 254.8565300256468 , endY : 284.98682325443 },{ startX : 254.8565300256468 , startY : 284.98682325443 , endX : 195.0826302967179 , endY : 256.3655994535725 },{ startX : 195.0826302967179 , startY : 256.3655994535725 , endX : 157.7877297732406 , endY : 238.5078772812887 },{ startX : 157.7877297732406 , startY : 238.5078772812887 , endX : 111.6482249913006 , endY : 238.5078772812887 },{ startX : 111.6482249913006 , startY : 238.5078772812887 , endX : 77.6103016563229 , endY : 274.6168137909417 },{ startX : 77.6103016563229 , startY : 274.6168137909417 , endX : 0.0000000000000141 , endY : 230.0000000000001 },{ startX : 220.0 , startY : 230.0 , endX : 296.5934070687545 , endY : 177.7297545356891 },{ startX : 296.5934070687545 , startY : 177.7297545356891 , endX : 259.8285386381903 , endY : 103.5845220693604 },{ startX : 259.8285386381903 , startY : 103.5845220693604 , endX : 420.9254943490212 , endY : 73.5256463399537 },{ startX : 420.9254943490212 , startY : 73.5256463399537 , endX : 439.6421521602497 , endY : 243.1913093870648 },{ startX : 439.6421521602497 , startY : 243.1913093870648 , endX : 358.0909944211144 , endY : 351.403264331298 },{ startX : 358.0909944211144 , startY : 351.403264331298 , endX : 437.6367923928081 , endY : 351.403264331298 },{ startX : 437.6367923928081 , startY : 351.403264331298 , endX : 535.8992572716124 , endY : 188.4173535929156 },{ startX : 535.8992572716124 , startY : 188.4173535929156 , endX : 494.4552221142694 , endY : 22.75954115825243 },{ startX : 494.4552221142694 , startY : 22.75954115825243 , endX : 242.448784306629 , endY : 58.16222028022185 },{ startX : 242.448784306629 , startY : 58.16222028022185 , endX : 242.448784306629 , endY : 170.3820258369023 },{ startX : 242.448784306629 , startY : 170.3820258369023 , endX : 220.0 , endY : 230.0 },{ startX : 0.0 , startY : 0.0 , endX : 102.7423024622439 , endY : 34.11511660553697 },{ startX : 102.7423024622439 , startY : 34.11511660553697 , endX : 120.1220567938053 , endY : 67.51387042128271 },{ startX : 120.1220567938053 , startY : 67.51387042128271 , endX : 182.9565476258303 , endY : 67.51387042128271 },{ startX : 182.9565476258303 , startY : 67.51387042128271 , endX : 206.3523721638376 , endY : 42.13081783043207 },{ startX : 206.3523721638376 , startY : 42.13081783043207 , endX : 345.3904068163301 , endY : 25.431442854534 },{ startX : 345.3904068163301 , startY : 25.431442854534 , endX : 546.5944851089534 , endY : 13.40789101719156 },{ startX : 546.5944851089534 , startY : 13.40789101719156 , endX : 603.4129148304164 , endY : 196.4330548178109 },{ startX : 603.4129148304164 , startY : 196.4330548178109 , endX : 677.6110988834389 , endY : 118.9479481290927 },{ startX : 677.6110988834389 , startY : 118.9479481290927 , endX : 626.140283080649 , endY : 68.84981933744893 },{ startX : 626.140283080649 , startY : 68.84981933744893 , endX : 603.4129148304164 , endY : 196.4330548178109 },{ startX : 125.4696707124749 , startY : 207.120653875038 , endX : 103.4107496541364 , endY : 134.9793505788825 },{ startX : 103.4107496541364 , startY : 134.9793505788825 , endX : 195.6571443264965 , endY : 134.9793505788825 },{ startX : 195.6571443264965 , startY : 134.9793505788825 , endX : 125.4696707124749 , endY : 207.120653875038 },{ startX : 125.4696707124749 , startY : 207.120653875038 , endX : 182.9565476258303 , endY : 67.51387042128271 }];
        for (var i = 0; i < piece.length; i++) {
           ctx.beginPath();
           ctx.moveTo(piece[i].startX,Math.abs(piece[i].startY-445.0));
           ctx.lineTo(piece[i].endX, Math.abs(piece[i].endY-445.0));
           ctx.stroke();
       };

</script>
</body>
</html>

 

xiaoyuyully
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas轨迹
漫游学海之旅
12-11 4800
http://mapv.baidu.com/examples/#baidu-map-forceEdgeBundling.html主要用到的就2个关键技术点： ctx.globalAlpha = ‘0.85’; //设置主canvas的绘制透明度 临时canvas备份主canvas的历史图像，再叠加到主canvas上。 绘制过程： 首先需要知道动画的起终点，然后绘制移动的圆，计算出中间的点的位置，定时
html5使用canvas的 bezierCurveTo()方法绘制地图轨迹曲线（三次贝塞尔曲线）
wxCSDN1997的博客
01-10 2301
参考：Canvas基于百度地图绘制流动曲线_清山博客-CSDN博客_百度地图流向图 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
【canvas】canvas基础使用（二）：使用canvas路径绘制点、线、面
最新发布
qq_2511276124的博客
04-08 1475
学习canvas路径绘制点、线、面的api。
js canvas 自定义飞行轨迹 ，线性流动
丽啊丽宝的博客
08-14 909
【代码】js canvas 自定义飞行轨迹 ，线性流动。
vue2+canvas 根据坐标实现小车移动
weixin_49651379的博客
11-12 5282
canvas小车移动
使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能
04-25
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到，找了很久终于合适
canvas轨迹回放功能实现
08-28
canvas轨迹回放功能实现是指利用canvas元素在网页中绘制轨迹回放图形的功能。该功能可以应用于各种领域，如游戏、地图、数据可视化等。 实现canvas轨迹回放功能需要了解以下几个关键点： 1. canvas元素的基本使用...
canvas实现按住鼠标移动绘制出轨迹的示例代码
09-27
这篇教程介绍的是如何利用`canvas`实现一个功能，即在鼠标按下并移动时在画布上绘制出轨迹。这个功能对于创建交互式绘图应用或者游戏场景非常有用。 首先，我们需要一个包含`canvas`元素的HTML文件。在示例代码中，...
绘制车辆行驶轨迹图
04-04
公司的一个项目，研究了一天弄出来的，以BaiduMapsApiDemo为原型。需求就是APP会拿到客户提供的GPS经纬度数据，就是车辆在行车时的经纬度，然后需要显示在百度地图上，以观察车辆是否行驶偏离，当然，不止一辆车。
android绘制触点轨迹的代码
08-25
可以使用Canvas类和Paint类来绘制触摸轨迹。 7. 实践应用：触摸轨迹绘制技术广泛应用于各种Android应用，如绘画应用、游戏应用等。 Android绘制触点轨迹的代码是Android开发中的一项重要技术，需要掌握触摸事件...
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
09-27
在这个例子中，`item.t`的值逐渐增加，每次增加0.05，根据当前的\( t \)值，我们可以通过贝塞尔公式计算出小球在曲线上的精确位置，并在Canvas上绘制出来。当\( t \)超过1时，意味着小球已经完成了当前曲线段的运动...
flutter开发实战-Canvas绘图之Path路径动画
一名开发者
07-17 1079
flutter提供一块2D画布Canvas，Canvas内部封装了一些基本绘制的API，开发者可以通过Canvas绘制各种自定义图形。canvas上绘图，有多种不同的方式，常用的就是使用 Path。这里是flutter实现Path路径动画。
Canvas2D沿路径动画实现
weixin_44022171的博客
05-19 1204
刚入职公司的时候，接手了一个canvas-2D的项目，客户要求能够实现根据实时数据的推送，canvas画布上的小车也能够根据消息在一个环路上去实时动画，尽管我们都知道这种需求是不可能实现的，如果想要实时数据推送，canvas上的图也跟着数据点位去变化，那么首先要采用WebSocket保持长连接，其次是不可能在中间动画起来的，假设小车在A，只有小车到了下一个点位B点，才能推送B点的数据给我，我是无法预知到下一个点位的，所以这种方案很明显不可取。
canvas动画—圆形扩散、运动轨迹
weixin_33951761的博客
03-03 1867
介绍 在ECharts中看到过这种圆形扩散效果，类似css3，刚好项目中想把它用上，but我又不想引入整个echart.js文件，更重要的是想弄明白它的原理，所以自己动手。在这篇文章中我们就来分析实现这种效果的两种方法，先上效果图： 实现原理 通过不断的改变圆的半径大小，不断重叠达到运动的效果，在运动的过程中，设置当前canvas的透明度...
canvas根据坐标完成室内地图路线的绘制
一杯清茶的博客
04-19 1414
canvas根据坐标完成室内地图路线的绘制 注释：此版本为低版本，后续会完善，只是提供一个思路 html: <canvas id="canvas" width="5083px" height="6579px"></canvas> style: <script> var c=document.getElementById( "canvas"); var ctx=c.getContext( "2d");
canvas实现圆轨滑动
qq_45939676的博客
10-09 653
canvas实现圆轨滑动
canvas实现点线动画效果
callmeCassie的博客
05-10 5354
效果图
canvas动态绘制运行轨迹
05-13
要在canvas中绘制运行轨迹，可以按照以下步骤进行操作： 1. 创建canvas元素并获取其上下文对象： ```javascript var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); ``` 2. 定义轨迹的初始位置和帧数： ```javascript var x = 0; var y = canvas.height / 2; var frameCount = 0; ``` 3. 创建一个函数来绘制运行轨迹： ```javascript function drawTrail() { // 用透明色填充整个画布 ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制轨迹点 ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fillStyle = 'blue'; ctx.fill(); // 更新轨迹位置 x += 5; y = canvas.height / 2 + Math.sin(frameCount * 0.05) * 50; // 增加帧数 frameCount++; } ``` 4. 使用requestAnimationFrame函数在canvas中循环绘制轨迹： ```javascript function loop() { drawTrail(); requestAnimationFrame(loop); } loop(); ``` 这样，就可以在canvas中动态绘制运行轨迹了。你可以根据需要调整轨迹的起始位置、颜色、绘制速度等参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值