简单描述：页面上有四个点，鼠标拖动四个点的位置来改变贝塞尔曲线的形状，双击放置点位

效果图：

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style html {溢出：隐藏；} * { padd : 0；保证金： 0；} # box {底色： # 000000；} .点{ width: 20pxheight: 20px背景-color : # fff；边界半径： 50%;绝对位置：left: 100pxtop:200px文本对齐：中心；线高： 20px}/style/head body canvas id=' box '/canvas div class=' point startPoint ' b/div class=' point EndPoint ' e/div div class=' point point 1 ' 1/div class=' point point 2 ' 2/div script src=' http : js/max。js '/脚本/正文/html js:

/** *由管理员于2017年8月11日创建* js/max。js */(function(){ var curEle=null；var startPointView=文档。queryselector(' .startPoint’)；var endPointPointView=文档。queryselector(' .endPoint’)；var点1视图=文档。queryselector('。第1点')；var point 2视图=文档。queryselector('。第2点')；定义变量上下文=null函数init(){ var canvasEle=document。query selector(' # box ')；canvasele . width=inner width canvasele . height=inner height//实时监听网页大小窗户。onresize=function(){ canvasele。宽度=内部宽度；canvasele . height=inner height }；上下文=canvasele。get context(' 2d ')；context . strokestyle=' white context . line width=10//贝塞尔曲线简单用法语境。begin path()；context.moveTo(300，300)；语境。beziercerveto(500，200，600，250，600，600)；语境。笔画()；//循环获取四个点的数组for(var I=0；i4；i ){ addEvent([startPointView，endPointPointView，point1View，point 2 view][I])；} //鼠标双击移除鼠标滑动事件放下拖动的点文件。ondblclick=function(){ document。removeeventlistener(' mousemove '，move)；};} //鼠标按下拖动函数addEvent(ele){ ele。onmousedown=function(){ curEle=this；文件。addeventlistener('鼠标移动'，移动)；};} //获取拖动位置并绘制贝塞尔曲线函数移动(事件){ curele。风格。左=事件。pagex ' px库里。风格。top=事件。Pagey ' pxcontext.clearRect(0，0，innerWidth，内部高度)；语境。begin path()；语境。moveto(getLeft(startPointView)，getTop(startPointView))；语境。beziercerveto(getLeft(点1视图)、getTop(点1视图)、getLeft(点2视图)、getTop(点2视图)、getLeft(端点点视图)、getTop(端点点视图))；语境。笔画()；}函数getLeft(ele){ return ParSeint(ele。风格。左)；}函数GetTop(ele){ return ParSeint(ele。风格。顶部)；} init()；})();以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。