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

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

2、html代码

		
		您的浏览器暂不支持canvas
		
	

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(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);
	    }

	}

   

})

更多可参考：https://github.com/chuanzaizai/line-charts