canvas贝塞尔曲线运动,canvas三次贝塞尔曲线

　　天正在等烟雨，而我在等你，啦啦啦，欢迎关注我的简书，今天分享的是原创的帆布仿写贝塞尔曲线方法。具体如下：

　　效果图：

　　超文本标记语言

　　画布id=我的画布宽度=500 高度=500 您的浏览器不支持画布/canvascss

　　画布{ border: 1px纯黑；}js

　　var canvas=文档。getelementbyid(我的画布)；var context=画布。获取上下文(“2d”)；var x1=100 var y1=100 var x2=400 var y2=400 draw()；函数draw(){ //画半透明的线语境。begin path()；context.moveTo(500，0)；context.lineTo(0，500)；context.strokeStyle=rgba(0，0，0，0.3)；context.lineWidth=10context上下文。笔画()；//画连接线语境。begin path()；context.moveTo(0，500)；context.lineTo(x1，y1)；语境。线宽=2；context . stroke style= black context。笔画()；语境。begin path()；context.moveTo(500，0)；context.lineTo(x2，y2)；语境。线宽=2；context . stroke style= black context。笔画()；//画红球语境。begin path()；上下文. arc(x1，y1，10，0，数学.* 2)；context . fill style= orange context。fill()；//画蓝球语境。begin path()；上下文. arc(x2，y2，10，0，数学.* 2)；context.fillStyle= bluecontext。fill()；//画贝塞尔曲线语境。begin path()；context.moveTo(0，500)；context.bezierCurveTo(x1，y1，x2，y2，500，0)；语境。线宽=5；语境。笔画()；} //拖动小球做动画//判断是否拖动小球//如果在小球上就做动画画布。onmousedown=function(e){ var ev=e window。事件；var x=ev . offset xvar y=ev.offsetY//判断是否在红球上var dis=Math.pow((x-x1)，2) Math.pow((y-y1)，2)；if(dis100){ console.log(鼠标在红球上);画布。onmousemove=function(e){ var ev=e window。事件；var xx=ev . offset xvar YY=ev.offsetY//清除画布context.clearRect(0，0，canvas.width，canvas。身高)；x1=xxy1=yy//重绘制draw()；} } //判断鼠标是否在蓝球上var dis=Math.pow((x-x2)，2) Math.pow((y-y2)，2)；if(dis 100){ canvas。onmousemove=function(e){ var ev=e window。事件；var xx1=ev . offset xvar yy1=ev.offsetY//清除画布context.clearRect(0，0，canvas.width，canvas。身高)；x2=xx1y2=yy1//重绘制draw()；} } }文档。onmouseup=function(){ canvas。onmousemove=“”；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。