SOURCE

	let funcCurve = {
		  linear:function(pos){
			return pos;
		  },
		  easeInQuad: function(pos){
			  return Math.pow(pos, 2);
		  },
		  easeOutQuad: function(pos){
			  return -(Math.pow((pos-1), 2) -1);
		  },
		  easeInOutQuad: function(pos){
			  if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2);
			  return -0.5 * ((pos-=2)*pos - 2);
		  },
		  easeInCubic: function(pos){
			  return Math.pow(pos, 3);
		  },
		  easeOutCubic: function(pos){
			  return (Math.pow((pos-1), 3) +1);
		  },
		  easeInOutCubic: function(pos){
			  if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
			  return 0.5 * (Math.pow((pos-2),3) + 2);
		  },
		  easeInQuart: function(pos){
			  return Math.pow(pos, 4);
		  },
		  easeOutQuart: function(pos){
			  return -(Math.pow((pos-1), 4) -1)
		  },
		  easeInOutQuart: function(pos){
			  if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
			  return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
		  },
		  easeInQuint: function(pos){
			  return Math.pow(pos, 5);
		  },
		  easeOutQuint: function(pos){
			  return (Math.pow((pos-1), 5) +1);
		  },
		  easeInOutQuint: function(pos){
			  if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5);
			  return 0.5 * (Math.pow((pos-2),5) + 2);
		  }
	}
	

	$('canvas').each(function(i){
		drawCanvas(this);
	});
	
	
function drawCanvas(self){
	self.width = 400;
	self.height = 400;
	let ctx = self.getContext('2d');	
	if(!ctx) alert('浏览器不支持canvas');
	
	ctx.lineWidth = 0.5;
	ctx.strokeStyle = '#000'; //颜色
	
	let offset=20;// 偏移值，用来画坐标轴
	ctx.save();
    ctx.translate(0 + offset,self.height - offset);
    ctx.rotate(getRads(180));
    ctx.scale(-1,1);    
	
	//绘x轴坐标
	drawAxisX(ctx,370,40);
	//绘制y轴坐标
	drawAxisY(ctx,370,40)
	ctx.moveTo(0,0);  //移动到原点坐标
	let round = {
		starAngle:0,
		endAngle:360,
		anticlockwise:true,
		border:[1,'#3385FF'],
		bgColor:'#3385FF',
		radius:0.5,
	}
	let x = 0;
	let y = 0;
	let id = $(self).attr('id');
	for(let i=0;i<self.width;i+=0.01){
		y = funcCurve[id](x);
		drawSolidRound(ctx,x,y,round);
		x += 0.01;	
		
	}
	
}

//绘制x轴 长度，刻度
function drawAxisX(ctx,xLength,xScale){
	
	// 画轴
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(xLength, 0);
	ctx.stroke();
	ctx.closePath();

	ctx.beginPath();
	ctx.moveTo(xLength-Math.cos(getRads(15))*10, Math.sin(getRads(15))*10);
	ctx.lineTo(xLength, 0);
	ctx.lineTo(xLength-Math.cos(getRads(15))*10, -Math.sin(getRads(15))*10);
	ctx.stroke();
	ctx.closePath();
	
	// 画刻度
	var x,y;
	y=6;
	for(x=xScale;x<xLength;x+=xScale){
		ctx.beginPath();
		ctx.moveTo(x, 0);
		ctx.lineTo(x, y);
		ctx.stroke();
		ctx.closePath();
	}

	// 标刻度数
	for(x=0;x<xLength;x+=xScale){
		ctx.save();
		ctx.scale(1,-1);
		ctx.fillText(x,x - 5,y + 10);
		ctx.restore();
	}
	
}

//绘制y轴 长度，刻度
function drawAxisY(ctx,yLength,yScale){
	// 画y轴
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(0, yLength);
	ctx.stroke();
	ctx.closePath();

	ctx.beginPath();
	ctx.moveTo(Math.sin(getRads(15))*10, yLength - Math.cos(getRads(15))*10);
	ctx.lineTo(0, yLength);
	ctx.lineTo(-Math.sin(getRads(15))*10, yLength - Math.cos(getRads(15))*10);
	ctx.stroke();
	ctx.closePath();
	
	// 画刻度
	var x,y;
	x=5;
	for(y=yScale;y<yLength;y+=yScale){
		ctx.beginPath();
		ctx.moveTo(x, y);
		ctx.lineTo(0, y);
		
		ctx.stroke();
		ctx.closePath();
	}

	// 写文字
	let yNumArr = [];
	let tmpArr = [];
	for(y=yScale;y<yLength;y+=yScale){		
		yNumArr.push(y);
		tmpArr.push(y);
	}
	yNumArr.reverse();
	x=-19;
	for(y=yScale,i = 0;y<yLength;y+=yScale,i++){		
		ctx.save();
		
		ctx.scale(1,-1);
		ctx.translate(0,-yLength);
		
		ctx.fillText(yNumArr[i],x,tmpArr[i] - yAlign(yScale));
		ctx.restore();
	}
	
}

//绘制点
function drawSolidRound(ctx,x,y,round){
     ctx.beginPath()
     ctx.lineWidth = round.border[0];   
     ctx.strokeStyle = round.border[1]; 
     ctx.closePath();
     ctx.arc(x, y, round.radius, getRads(round.starAngle),getRads(round.endAngle),round.anticlockwise); 
     ctx.fillStyle = round.bgColor;
     ctx.fill();
     ctx.stroke();
}
//获取弧度
function getRads (degrees) { return (Math.PI * degrees) / 180; } 


//y轴刻度数对齐
function yAlign(num){ return num - 15; }

<div class="box-1">
		<h2>linear线</h2>
		<canvas id="linear"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInQuad线</h2>
		<canvas id="easeInQuad"></canvas>
	</div>
	<div class="box-1">
		<h2>easeOutQuad线</h2>
		<canvas id="easeOutQuad"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInOutQuad线</h2>
		<canvas id="easeInOutQuad"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInCubic线</h2>
		<canvas id="easeInCubic"></canvas>
	</div>
	<div class="box-1">
		<h2>easeOutCubic线</h2>
		<canvas id="easeOutCubic"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInOutCubic线</h2>
		<canvas id="easeInOutCubic"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInQuart线</h2>
		<canvas id="easeInQuart"></canvas>
	</div>
	<div class="box-1">
		<h2>easeOutQuart线</h2>
		<canvas id="easeOutQuart"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInOutQuart线</h2>
		<canvas id="easeInOutQuart"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInQuint线</h2>
		<canvas id="easeInQuint"></canvas>
	</div>
	<div class="box-1">
		<h2>easeOutQuint线</h2>
		<canvas id="easeOutQuint"></canvas>
	</div>
	<div class="box-1">
		<h2>easeInOutQuint线</h2>
		<canvas id="easeInOutQuint"></canvas>
	</div>

*{
			padding:0;
			margin:0;
		}
		h2{
			font-size:18px;
			height:30px;
			line-height:30px;
		}
		.box-1{
			float:left;
			margin:15px;
			width:xLengthpx;
			border:1px solid #000;
		}