canvas中绘制二次贝塞尔曲线的方法为ctx.quadraticCurveTo(x1,y1,x2,y2);
四个参数分别为两个控制点的坐标.开始点即当前canvas中目前的点,如果想从指定的点开始,需要使用ctx.moveTo(x,y)方法
演示效果如下图
上代码:
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#info{ 800px; height:30px; line-height:30px; margin:50px auto 0 auto;}
#canvas{ display:block; border:1px solid #ccc; margin:0px auto;}
</style>
<script src="js/dot.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="info"></div>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>
JS代码
dot.js
// JavaScript Document var dot = function ( x , y ){ this.x = x; this.y = y; this.r = dotR; } dot.prototype.draw = function (ctx){ ctx.beginPath(); ctx.arc( this.x , this.y , this.r , 0 , Math.PI*2 ); ctx.fill(); ctx.closePath(); }
main.js
// JavaScript Document var CANVERS_WIDTH = 800; var CANVERS_HEIGHT = 600; var dotR = 10; var dotArr = []; window.onload = function(){ var oCanvas = document.querySelector("#canvas"); var oInfo = document.querySelector("#info"); var ctx = oCanvas.getContext("2d"); var dotA = new dot( 100 , 400 ); dotArr.push( dotA ); var dotB = new dot( 200 , 200 ); dotArr.push( dotB ); var dotC = new dot( 400 , 400 ); dotArr.push( dotC ); creatGuides(); createBezier(); function createBezier(){ ctx.beginPath(); ctx.moveTo( dotA.x , dotA.y ); ctx.quadraticCurveTo( dotB.x , dotB.y , dotC.x , dotC.y ); ctx.stroke(); ctx.closePath(); } //绘制辅助线 ctx.lineWidth = 2; function creatGuides(){ dotA.draw( ctx ); dotB.draw( ctx ); dotC.draw( ctx ); ctx.beginPath(); ctx.moveTo( dotA.x, dotA.y ); ctx.lineTo( dotB.x , dotB.y ); ctx.lineTo( dotC.x , dotC.y ); ctx.stroke(); ctx.closePath(); } oCanvas.onmousedown = function (e){ var disX = e.clientX - this.offsetLeft; var disY = e.clientY - this.offsetTop; //判断鼠标放下是是否在控制点上 var curDot = checkDot(disX,disY) if( curDot ){ if(oCanvas.setCapture){ oCanvas.setCapture(); } document.onmousemove = function (e){ oInfo.textContent ="ctx.quadraticCurveTo("+ dotB.x + "," + dotB.y + "," + dotC.x + "," + dotC.y + ")"; disX = e.clientX - oCanvas.offsetLeft; disY = e.clientY - oCanvas.offsetTop; curDot.x = disX; curDot.y = disY; console.log(disX) ctx.clearRect(0,0,CANVERS_WIDTH,CANVERS_HEIGHT); creatGuides(); createBezier(); } document.onmouseup = function (){ creatGuides(); createBezier(); document.onmousemove = null; document.onmouseup = null; if(oCanvas.setCapture){ oCanvas.releasesCaptrue(); } } return false; } } function checkDot(x,y){ for( var i=0; i<dotArr.length; i++ ){ if( Math.abs( dotArr[i].x - x ) < dotR && Math.abs( dotArr[i].y - y ) < dotR ){ return dotArr[i]; } } return false; } }