HTML 代码:
</!DOCTYPEhtml>/</html>/</head>/</title>/SplineCurve<//title>/</metacharset="/UTF-8"/>/</styletype="/text/css"/>/canvas{border/1pxsolidblack/}<//style>/<//head>/</body>/</canvasid="/canvas"/width="/800"/height="/500"/>/<//canvas>/</scriptsrc="/spline/js"/>/<//script>/</script>///绘制样条曲线varcanvas=document/getElementById('/canvas'/)/if(canvas/getContext){varctx=canvas/getContext('/2d'/)/ctx/fillStyle='/white'//ctx/fillRect(0/0/canvas/width/canvas/height)/varpoints=[{x/50/y/100}/{x/200/y/150}/{x/300/y/250}/{x/400/y/200}/{x/500/y/300}]/vartension=0/5/varsegments=50/varsplinePoints=getSplinePoints(points/tension/segments)/drawCurve(ctx/splinePoints)/}<//script>/<//body>/<//html>/JavaScript代码(spline/js)://计算样条曲线上的点functiongetSplinePoints(points/tension/segments){if(points/length</2)return[]///初始化矩阵varm=[]/for(vari=0/i</points/length/i++){m[i]=[1/points[i]/x/points[i]/x*points[i]/x/points[i]/x*points[i]/x*points[i]/x]/}//计算常数向量varb=[]/for(vari=0/i</points/length/i++){b[i]=[points[i]/y]/}//计算系数矩阵varmt=math/transpose(m)/vara=math/multiply(mt/m)/varai=math/inv(a)/varx=math/multiply(ai/mt)/x=math/multiply(x/b)///计算曲线上的点varcurve=[]/for(vari=0/i</(points/length-1)/i++){for(varj=0/j</segments/j++){vart=j/segments/vart2=t*t/vart3=t2*t/varh00=2*t3-3*t2+1/varh01=-2*t3+3*t2/varh10=t3-2*t2+t/varh11=t3-t2/varpx=h00*points[i]/x+h01*points[i+1]/x+h10*tension*(points[i+1]/x-points[i]/x)+h11*tension*(points[i+2]/x-points[i+1]/x)/varpy=h00*x[i][0]+h01*x[i+1][0]+h10*tension*(x[i+1][0]-x[i][0])+h11*tension*(x[i+2][0]-x[i+1][0])/curve/push({x/px/y/py})/}}returncurve/}//绘制曲线functiondrawCurve(ctx/points){ctx/lineWidth=2/ctx/strokeStyle='/black'//ctx/beginPath()/ctx/moveTo(points[0]/x/points[0]/y)/for(vari=1/i</points/length/i++){ctx/lineTo(points[i]/x/points[i]/y)/}ctx/stroke()/}使用这个代码,你可以在网页中绘制出指定点的样条曲线。代码中的 points 数组包含要绘制曲线的点,tension 参数控制曲线的平滑度,segments 参数控制曲线的精细度,以上是在线CAD中样条曲线的开发思路,有其他问题可以到梦想CAD控件官网查看云图产品文档。