canvas实现折点图，并有鼠标hover样式

1、直接上图，看最终样式

2、html代码

<div class="myCanvas-cont">		<canvas id="myCanvas" width="1100" height="500">		您的浏览器暂不支持canvas		</canvas>	</div>3、js代码
$(function(){	var c=document.getElementById("myCanvas");	var cxt=c.getContext("2d");	/*开始绘制外边框*/	cxt.beginPath();	cxt.strokeStyle   = '#cdc9c4';	cxt.lineWidth = 4;	cxt.moveTo(100,400);	cxt.lineTo(1020,400);	cxt.stroke();	cxt.beginPath();	cxt.strokeStyle   = '#cdc9c4';	cxt.lineWidth = 4;	cxt.moveTo(100,400);	cxt.lineTo(100,0);	cxt.stroke();	/*开始绘制横向内边框*/	cxt.beginPath();	cxt.strokeStyle='#e7e5e2';	cxt.lineWidth = 1;	for(let i=1;i<=6;i++){		cxt.moveTo(100,400-60*i);		cxt.lineTo(980,400-60*i);		cxt.stroke();	}	/*开始绘制竖向内边框*/	for(let i=1;i<=11;i++){		cxt.moveTo(100+80*i,400);		cxt.lineTo(100+80*i,40);		cxt.stroke();	}		/*开始绘制竖轴文字*/	cxt.font = "16px SimHei";    cxt.fillStyle = "#00c5de";    //从坐标点(50,345)开始绘制文字    for(let i=0;i<=6;i++){    	cxt.fillText(10*i+"万", 50, 405-60*i);    }    /*开始绘制横轴文字*/    for(let i=1;i<=12;i++){    	cxt.fillText("2017-"+i, 80*i, 440);    }    /*开始绘制圆点(每月数据)*/    ////模拟的每月数据    var arr=[22,40,50,60,32,11,0,45,50,15,20,55];       //开始绘制(圆点Y轴坐标)    var yArr=[];    for(let i=0,len=arr.length;i<len;i++){    	yArr.push(400-arr[i]*6);    }    for(let j=0,len=yArr.length;j<len;j++){    	//画实心圆    	cxt.beginPath();    	cxt.fillStyle="#00c5de";		cxt.arc(100+80*j,yArr[j],9,0,Math.PI*2,true);		cxt.fill();		cxt.closePath();		//绘制连接圆的折线		cxt.beginPath();		cxt.strokeStyle='#00c5de';		cxt.lineWidth = 1;		cxt.moveTo(100+80*j,yArr[j]);		cxt.lineTo(100+80*(j+1),yArr[j+1]);		cxt.stroke();    }		c.addEventListener("mousemove", function (evt) { 	  var mousePos = getMousePos(c, evt); 	  var pagex=mousePos.x,	  	  pagey=mousePos.y;	  for(let j=0,len=yArr.length;j<len;j++){	 	//鼠标移入圆的范围,给圆添加新样式	 	if(pagex>(100+80*j-9) && pagex<(100+80*j+9) && pagey>(yArr[j]-9) && pagey<(yArr[j]+9)){	 		//画实心圆	    	cxt.beginPath();	    	cxt.fillStyle="#c9302c";			cxt.arc(100+80*j,yArr[j],9,0,Math.PI*2,true);			cxt.fill();			cxt.closePath();	 	}else{	 		//清除鼠标移入时的圆	 			 		//再从新绘制圆 		 	cxt.beginPath();	    	cxt.fillStyle="#00c5de";			cxt.arc(100+80*j,yArr[j],9,0,Math.PI*2,true);			cxt.fill();			cxt.closePath();	 	}    	      } 	}, false); 	 //获取鼠标在canvas画布上的位置(**不是浏览器窗口的鼠标位置)	 function getMousePos(canvas, evt) { 	   var rect = canvas.getBoundingClientRect(); 	   return { 	     x: evt.clientX - rect.left * (canvas.width / rect.width),	     y: evt.clientY - rect.top * (canvas.height / rect.height)	   }	 }	//定义清除圆形区域函数	function clearCircle(oc,x,y,r){	    for(var i=0; i< Math.round(Math.PI * r); i++){	        var angle = (i / Math.round(Math.PI * r)) * 360;	        oc.clearRect(x, y, Math.sin(angle * (Math.PI / 180)) * r , Math.cos(angle * (Math.PI / 180)) * r);	    }	}   })