canvas绘制二次贝塞尔曲线、三次贝塞尔曲线、画爱心

方法说明

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

 

画一个二次贝塞尔曲线

	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
	    ctx.beginPath();
    	ctx.moveTo(100, 200);
		ctx.quadraticCurveTo(100, 100, 230, 200);
		ctx.stroke();
	}

画一个三次贝塞尔曲线

	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
	    ctx.beginPath();
    	ctx.moveTo(50, 200);
		ctx.bezierCurveTo(100, 100,150,150, 230, 200);
		ctx.stroke();
	}

画一个爱心

	
	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
	    ctx.beginPath();
    	ctx.moveTo(150, 100);
		ctx.bezierCurveTo(50,50,50,150, 150, 200);
		ctx.moveTo(150, 100);
		ctx.bezierCurveTo(250, 50,250,150, 150, 200);
		ctx.fill();
	}