求教,贝塞尔曲线的运动轨迹解决思路-JavaSript-爱易网页

求教,贝塞尔曲线的运动轨迹解决思路

日期：2014-05-16　浏览次数：20380 次

求教,贝塞尔曲线的运动轨迹
想实现的效果是:
1.有一个画板,用户使用鼠标,画出一个贝塞尔曲线.
2.放置一个div,使div,能够沿着贝赛尔曲线运动;

兼容性:
1.浏览器兼容性的问题:ie10,firefox最新版,safari最新版,其他浏览器不考虑;

求教问题:
1. 针对这种需求,求教一个比较完美的解决方案:
是采用,svg, js+html, css3+js, vml, html5+css3.
哪种技术,比较好.请不吝赐教.

2. 如第一条,恳请有经验人士,指导一下小弟.

谢谢

浏览器贝赛尔曲线 CSS3 JavaScript

------解决方案--------------------
可参考 http://paperjs.org/examples/chain/
------解决方案--------------------

引用:

Quote: 引用:

IE的只兼容IE10以用svg,什么HTML,css 这都是页面排版问题了

谢谢回复,请问如果我想鼠标绘制贝赛尔曲线,有什么例子吗?多谢

用canvas 写了个例子，你参考一下
路径我是通过canvas像素取的，你最好有贝赛尔曲线路径的算法



<!DOCTYPE html>

<html>

<head>

<meta charset="gb3212">

<style type="text/css">

    body{margin:0;}

    canvas{margin: 0px;}

</style>

</head>

<body  >

<style>

	#canvas{

		position: absolute;

		left:50px;

		top:50px;

	}

	#div1{

			position: absolute;

			background-color:blue;

			width:5px;

			height:5px;

	}

</style>

<div id="div1"></div>

<canvas id="canvas"    width="200" height="200" style="border: 1px solid #ccc;"></canvas>

 

<button id="bnt" onclick="beginDraw()">开始画贝塞尔曲线</button>

<button id="bnt" onclick="play()">沿着贝赛尔曲线运动</button>

先点"开始画贝塞尔曲线",在方框点三次不同坐标,生成曲线后，点第二按钮

 

<script>

var canvas=document.getElementById('canvas');

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

var ctx=context;

var bnt=document.getElementById('bnt');



var isDraw=0,drawIndex=0,drawPs=[];

function beginDraw(){ 

		ctx.restore(); 

		ctx.clearRect(0,0,200,200);

		isDraw=1;

		drawIndex=0;

		drawPs=[];

		bnt.disabled=true;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

求教,贝塞尔曲线的运动轨迹解决思路

相关资料更多>

推荐阅读更多>