基于射流研究…画布实现二次贝塞尔曲线

本文实例为大家分享了射流研究…画布实现二次贝塞尔曲线的具体代码，供大家参考，具体内容如下

先上效果图：

实现代码：

！DOCTYPE html html health eta charset=' utf-8 '标题二次贝塞尔曲线/title meta name=' Keywords ' content=' meta name=' Description ' content=' style type=' text/CSS ' body，h1 { margin:0 }画布{ margin : 20px }/样式/头模h1二次贝塞尔曲线/h1画布id=' canvas '宽度=600高度=600样式='边框： 1px实心# CCC'/拉票脚本/** * @param sx起始点x坐标* @param sy起始点y坐标* @param ex结束点x坐标* @param ey结束点y坐标* @param cx控制点x坐标* @param cy控制点y坐标* @param部分将起始点到控制点的线段分成的份数，数值越高，计算出的曲线越精确*/函数draw(sx，sy，ex，ey，cx，cy，part){ var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；//绘制起始点、控制点、终点CTX。begin path()；ctx.moveTo(sx，sy)；ctx.lineTo(cx，cy)；ctx.lineTo(ex，ey)；CTX。笔画()；//绘制二次贝塞尔曲线CTX。begin path()；ctx.moveTo(sx，sy)；//起始点到控制点的x和y每次的增量var变化x1=(CX-sx)/部分；var变化1=(cy-sy)/零件；//控制点到结束点的x和y每次的增量var changeX2=(ex - cx) /零件；var变化2=(ey-cy)/零件；for(var I=0；一部分；i ) { //计算两个动点的坐标var qx1=sx变化x1 * I；var qy1=sy变化y1 * I；var q x2=CX变化x2 * I；var qy2=cy变化2 * I；//计算得到此时的一个贝塞尔曲线上的点坐标var bx=qx1(qx2-qx1)* I/part；var by=qy1(qy2-qy1)* I/part；ctx.lineTo(bx，by)；} CTX。笔画()；}窗口。onload=function(){ draw(0，0，600，0，150，450，100)；};/脚本/正文/html上面的是静态的，来个动态的看一看：

！DOCTYPE html html health eta charset=' utf-8 '标题二次贝塞尔曲线/title meta name=' Keywords ' content=' meta name=' Description ' content=' style type=' text/CSS ' body，h1 { margin:0 }画布{ margin : 20px }/样式/头模h1二次贝塞尔曲线/h1画布id=' canvas '宽度=600高度=600样式='边框： 1px实心# CCC'/拉票脚本/** * @param sx起始点x坐标* @param sy起始点y坐标* @param ex结束点x坐标* @param ey结束点y坐标* @param cx控制点x坐标* @param cy控制点y坐标* @param部分将起始点到控制点的线段分成的份数，数值越高，计算出的曲线越精确* @param间隔画图的间隔* @返回函数调用一次就向后画一段曲线*/函数draw(sx，sy，ex，ey，cx，cy，part，interval){ var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；//绘制起始点、控制点、终点CTX。begin path()；ctx.moveTo(sx，sy)；ctx.lineTo(cx，cy)；ctx.lineTo(ex，ey)；CTX。笔画()；//绘制二次贝塞尔曲线CTX。begin path()；ctx.moveTo(sx，sy)；//起始点到控制点的x和y每次的增量var变化x1=(CX-sx)/部分；var变化1=(cy-sy)/零件；//控制点到结束点的x和y每次的增量var changeX2=(ex - cx) /零件；var变化2=(ey-cy)/零件；//上次的点坐标var lastX=sxvar lastY=syvar I=0；返回函数(){ //计算两个动点的坐标var qx1=sx变化x1 * I；var qy1=sy变化y1 * I；var q x2=CX变化x2 * I；var qy2=cy变化2 * I；//计算得到此时的一个贝塞尔曲线上的点var bx=qx1(qx2-qx1)* I/part；var by=qy1(qy2-qy1)* I/part；//从上次的点继续画CTX。begin path()；ctx.moveTo(lastX，LasTy)；ctx.lineTo(bx，by)；CTX。笔画()；//保存点坐标lastX=bxlastY=ByI=1；如果(我部分){ setTimeout(参数。呼叫者、间隔)；} } }窗口。onload=function(){ var display=draw(0，0，600，0，150，450，200，50)；显示();};/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。