javascript轨迹,js曲线轨迹

用Javascript脚本获取页面鼠标行为轨迹并描绘

!doctype html

html lang="en"

head

meta charset="UTF-8"

titleDemo/title

style

*{

margin:0;

padding:0;

border:0;

}

.stage{

}

.track-monitor{

background-color:orange;

}

.track-pad{

height:200px;

background-color:green;

}

.track-coordinate{

background-color:purple;

color:white;

height:25px;

line-height:25px;

font-size:12px;

}

.track-coordinate-list{

font-size:12px;

width:100%;

word-break:break-word;

}

/style

script

window.addEventListener('load',function(){

var pad = document.getElementsByClassName('track-pad')[0];

var monitor = document.getElementsByClassName('track-monitor')[0];

var coordinate = document.getElementsByClassName('track-coordinate')[0];

var clist = document.getElementsByClassName('track-coordinate-list')[0];

var reset = document.getElementsByTagName('button')[0];

var fixSize = function(){

monitor.width = window.innerWidth;

};

var context = monitor.getContext('2d');

var cset = [];

 

window.addEventListener('resize',function(){ fixSize(); });

pad.addEventListener('mousemove',function(e){

context.strokeStyle = 'white';

context.lineTo(e.x,e.y);

context.stroke();

coordinate.innerHTML = e.x+':'+e.y;

cset.push(coordinate.innerHTML);

clist.innerHTML = cset.join(',');

});

reset.addEventListener('click',function(){

fixSize();

cset = [];

clist.innerHTML = '';

coordinate.innerHTML='在绿色的方块中滑动鼠标';

});

fixSize();

});

/script

/head

body

div class="stage"

div class="track-pad"/div

canvas width="100" height="200" class="track-monitor"/canvas

div class="track-coordinate"在绿色的方块中滑动鼠标/div

button重置/button

div class="track-coordinate-list"/div

/div

/body

/html

js里怎么让元素沿着不规则的轨迹移动

搞过wpf的动画，对js的不太熟悉，不过想来思路也差不多。

如果轨迹是你自己定的，那么就构建条路径（path或者别的什么），将它设置为元素移动路径

如果是随机的，你就在每一步移动之前用随机数取得下一步的坐标，设置为单步动画的目标点

跪求，html,css,js前端怎么实现某个点按照轨迹来画图案。

这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹

body

center

canvas id="cavsElem" width="800" height="560" style="border: 1px solid black; "你的浏览器不支持此涂鸦板/canvas

画笔颜色：input type="color" id="context.color" /

画笔大小:input type="number"id="context.size" max="10" value="1" /

/center

script

(function(){

var canvas=document.getElementById('cavsElem');//获得画布

var context=canvas.getContext('2d');//准备画笔

var a=document.getElementById('context.color');

var b=document.getElementById('context.size');

    canvas.onmousedown=function(e){     //鼠标触发onmousedown事件时,获取起始坐标

     var x=e.clientX-canvas.getBoundingClientRect().left;

     var y=e.clientY-canvas.getBoundingClientRect().top;

     context.beginPath();

     context.moveTo(x,y);    

    canvas.onmousemove=function(event){   //触发鼠标移动事件时，获取绘制线条的坐标

     var x=event.clientX-canvas.getBoundingClientRect().left;

     var y=event.clientY-canvas.getBoundingClientRect().top;

     context.lineTo(x,y);//绘制线条

     context.strokeStyle=a.value;

context.lineWidth=b.value;

     context.stroke();

    };

    canvas.onmouseup=function(event){    //鼠标被松开时，返回null

     canvas.onmousemove=null;

    };

  };

 }());

/script

/body

如何使用javascript实现小球是沿着操场跑道轨迹运动

操场轨迹上下两边为直线，左右为半圆。

选择用纯css分成四段控制动画，最终效果如图：

详细分析：

创建HTML：

HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。

div class="layout"

div class="point"/div

/div

核心css：

去掉了浏览器兼容用的代码。

把动画分成四个部分：上方直线-右边半圆-下方直线-左边半圆。

最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

}

}

完整代码:

html

head

style 

.point{

width:10px;

height:10px;

background:blue;

position:relative;

border-radius:5px;

margin:0 auto;

}

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

/* Chrome: */

-webkit-animation-name:rotate;

-webkit-animation-duration:2s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

-webkit-animation-play-state:running;

-webkit-animation-direction:normal;

/* Firefox: */

-moz-animation-name:rotate;

-moz-animation-duration:2s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-moz-animation-play-state:running;

-moz-animation-direction:normal;

/* Opera: */

-o-animation-name:rotate;

-o-animation-duration:2s;

-o-animation-timing-function:linear;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-o-animation-play-state:running;

-o-animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

-ms-transform:rotate(360deg);  /* IE 9 */

-moz-transform:rotate(360deg);  /* Firefox */

-webkit-transform:rotate(360deg); /* Chrome */

-o-transform:rotate(360deg);  /* Opera */

}

}

/style

/head

body

div class="layout"

div class="point"/div

/div

/body

/html