js商场导航思路--ivx--canvas实现导航动画效果

最近在研究商场导航思路

因为ivx暂时没有商场导航的案例，随即我便做了一个。

暂时没有找到自动寻路的方案。只能写好每条路线到数据库里面。然后通过搜索出来的结果进行演示

因为最近学习了ivx html5快速开发，

我这里就演示的是ivx的开发过程。

以下为js 源码

//以下代码仅作为参考不可直接运行使用
//路径数据为 [[369,245],[777,468],[844,300]]var 导航坐标 = sitegorup
var ctx = ids.drawId._ctx;var kuan = document.body.clientWidth
var gao = document.body.clientHeight
var screenx = 0
var screeny = 0var canvas = document.getElementsByTagName("canvas")[0];var img = new Image(); //这个就是 img标签的dom对象
img.src = ids.jiantou._link;
img.alt = '文本信息';
ctx.clearRect(0, 0, 1500, 844);function move() {console.log("sitegorup:", 导航坐标);var i = 0;//图片加载完成后，执行此方法var t = 0;var timeId = setInterval(function () {console.log("导航坐标length:", i);var x0 = 导航坐标[i][0];var y0 = 导航坐标[i][1];var x1 = 导航坐标[i + 1][0];var y1 = 导航坐标[i + 1][1];//贝塞尔曲线一次方程。t 取值0.1-1 ，即可画出2个坐标点之间的所有点。
//即可画出线段动画效果var x2 = (1 - t) * x0 + t * x1var y2 = (1 - t) * y0 + t * y1t = t + 0.01//console.log("x0:", x1);ctx.drawImage(img, x2, y2);if (x2 >= kuan / 2) {screenx =  kuan / 2-x2
//左边距，始终让线条出于中心位置canvas.style.left = screenx+"px";console.log("screenx:", screenx);console.log("canvas.style.left:", canvas.style.left);}if (y2 >= gao / 2) {screeny =  gao / 2-y2
//上边距，始终让线条出于中心位置canvas.style.top = screeny+"px";console.log("screeny:", screeny);console.log("canvas.style.top:", canvas.style.top);}if (t >= 1) {t = 0;if (i <= 导航坐标.length - 3) {i++;} else {clearInterval(timeId);}}}, 1000 / 30);//console.log("timeId:",timeId);return timeId;
}var Id = img.onload = move();console.log("Id:", Id);
//用于取消动画效果，需要知道setInterval 的id
return { timeId: Id };

js商场导航思路--ivx--canvas实现导航动画效果相关推荐

php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
javascript写字技巧_js canvas实现写字动画效果
本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下页面html: 学写一个字 content=" height = device-height, ...
用SVG和Vanilla JS框架创建一个“星形变心形”的动画效果
在我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种.最好先看下那篇文章,因为在这篇文章中我们要用到一些那篇文章中讲过的内容.例如例子的演示.各种时 ...
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
前端必备的Canvas接口和动画效果的总结
来源 | https://segmentfault.com/a/1190000021998875 概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript 通过操作 ...
必备的Canvas接口和动画效果大全
来源 | https://segmentfault.com/a/1190000021998875 1.概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript 通过 ...
Javascript Canvas 实现粒子动画效果分享
今天和大家一起分享一下用 canvas 实现粒子动画效果的实现,就像下图的效果要实现这样的效果,我们首先需要一段包含了 canvas 的基础 html 代码 <!DOCTYPE html> ...
html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
java canvas 动画效果_八大疯狂HTML5 Canvas及WebGL动画效果
[IT168应用]HTML5.WebGL和JavaScript改变了长久以来的动画制作行业.在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet.而现在,使用脚本语言和 ...

js商场导航思路--ivx--canvas实现导航动画效果

js商场导航思路--ivx--canvas实现导航动画效果相关推荐

最新文章

热门文章