canvas 之自由移动的三次贝塞尔曲线
2016-07-25 21:27:42 来源：慕课网
可以自由移动四个控制点,同时在右边显示坐标,帮助你绘画出更满意的曲线.<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: auto; padding: 0; } #wrap{ width: 800px; margin: 50px auto; } #myCanvas{ float: left; background: lightskyblue; } #show { width: 300px; height: 300px; background: url(girl.jpg) no-repeat; /*display: inline-block;*/ float: left; } p{ margin-left: 20px; color: palegreen; height: 20px; font-size: 20px; margin-top: 20px; } #show p:first-child { margin-top: 80px; } </style> </head> <body> <div id="wrap"> <canvas id="myCanvas" width="500" height="500"></canvas> <div id="show"> <p>起点的坐标为:</p> <p>终点的坐标为:</p> <p>控制点1的坐标为:</p> <p>控制点2的坐标为:</p> </div> </div> </body> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var positions = document.getElementsByTagName('p'); //起点 var rec1 = { x:50, y:250, r:10, color:'red' } //终点 var rec2 = { x:450, y:250, r:10, color:'coral' } //控制点 var rec3 = { x:200, y:100, r:10, color:'greenyellow' } var rec4 = { x:300, y:400, r:10, color:'dodgerblue' } //将4个对象放入数组 var arr = [rec1,rec2,rec3,rec4]; //创建小圆绘制函数 function drawCir (obj) { context.beginPath(); context.fillStyle = obj.color; context.arc(obj.x,obj.y,10,0,Math.PI * 2); context.fill(); context.closePath(); } var img = new Image(); img.src = 'girls.jpg'; //创建线绘制函数 function drawBez (obj1,obj2,obj3,obj4) { context.drawImage(img,250,0,500,450,0,0,canvas.width,canvas.height); context.beginPath(); context.strokeStyle = '#FFFACD'; context.moveTo(obj1.x,obj1.y); context.lineTo(obj3.x,obj3.y); context.stroke(); context.closePath(); context.beginPath(); context.strokeStyle = '#FFFACD'; context.moveTo(obj2.x,obj2.y); context.lineTo(obj4.x,obj4.y); context.stroke(); context.closePath(); //贝塞尔曲线 context.save(); context.beginPath(); context.strokeStyle = 'black'; context.lineWidth = 5; context.moveTo(obj1.x,obj1.y); context.bezierCurveTo(obj3.x,obj3.y,obj4.x,obj4.y,obj2.x,obj2.y); context.stroke(); context.closePath(); context.restore(); } //实例化控制点 和 线 drawBez(arr[0],arr[1],arr[2],arr[3]); for (var i in arr) { drawCir(arr[i]); } positions[0].innerHTML = '起点的坐标为: (' + arr[0].x + ',' + arr[0].y + ')'; positions[1].innerHTML = '终点的坐标为: (' + arr[1].x + ',' + arr[1].y + ')'; positions[2].innerHTML = '控制点1的坐标为: (' + arr[2].x + ',' + arr[2].y + ')'; positions[3].innerHTML = '控制点2的坐标为: (' + arr[3].x + ',' + arr[3].y + ')'; var n = 0; //自由移动控制点 canvas.onmousedown = function (e) { var e = e window.event; var cliX = e.clientX - canvas.offsetLeft; var cliY = e.clientY - canvas.offsetTop; for (var i in arr) { drawCir(arr[i]); if (context.isPointInPath(cliX,cliY)) { n = i; var disX = cliX - arr[n].x; var disY = cliY - arr[n].y; canvas.onmousemove = function (e) { console.log('a') context.clearRect(0,0,canvas.width,canvas.height); var e = e window.event; var x = e.clientX - canvas.offsetLeft - disX; var y = e.clientY - canvas.offsetTop - disY; arr[n].x = x; arr[n].y = y; drawBez(arr[0],arr[1],arr[2],arr[3]); for (var i in arr) { drawCir(arr[i]); } positions[0].innerHTML = '起点的坐标为: (' + arr[0].x + ',' + arr[0].y + ')'; positions[1].innerHTML = '终点的坐标为: (' + arr[1].x + ',' + arr[1].y + ')'; positions[2].innerHTML = '控制点1的坐标为: (' + arr[2].x + ',' + arr[2].y + ')'; positions[3].innerHTML = '控制点2的坐标为: (' + arr[3].x + ',' + arr[3].y + ')'; } } } } canvas.onmouseup = function () { canvas.onmousemove = null; } </script></html>
