canvas实现一个线性图

先写一个借用图片的简单线性图

方法 drawImage(image, x, y)  其中 image 是 image 对象，x 和 y 是其在目标 canvas 里的起始坐标。

	var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		draw()
		 
		function draw(){
			var image = new Image();//创建Image对象
			image.src='images/1.png';//指定路径
			image.onload=function(){//图片加载完成后执行的函数
			  ctx.drawImage(image,0,0);//绘制图片
		      ctx.beginPath();
		      //这里开始画线条
		      ctx.moveTo(30,106);
		      ctx.lineTo(70,46);
		      ctx.lineTo(103,76);
		      ctx.lineTo(170,15);
		      //执行绘画
		      ctx.stroke();
			}
		}

结果如下

来一个全部自己划线的（包括坐标）

	var canvas = document.getElementById('canvas');
		canvas.width='600';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		var x0=30,//x轴0处坐标
			y0=280,//y轴0处坐标
			x1=560,//x轴顶处坐标
			y1=30,//y轴顶处坐标
			dis=30;
			
		draw();
			
		function draw(){
			  
			  //先绘制X和Y轴
			 ctx.beginPath();
			 ctx.lineWidth=1; 
			 
		     ctx.moveTo(x0,y1);//笔移动到Y轴的顶部
		     ctx.lineTo(x0,y0);//绘制Y轴
		     ctx.lineTo(x1,y0);//绘制X轴
		     ctx.stroke();
		       
		     //绘制虚线和Y轴值  
		     var yDis = y0-y1;
		     var n=1;
		     ctx.fillText(0,x0-20,y0);//x,y轴原点显示0
		     ctx.save();
		     while(yDis>dis){
		     	 ctx.beginPath();
		     	 //每隔30划一个虚线
		     	 ctx.setLineDash([2,2]);//实线和空白的比例
		     	 ctx.moveTo(x1,y0-dis);
		     	 ctx.lineTo(x0,y0-dis);
		     	 ctx.fillText(dis,x0-20,y0-dis);
		     	 //每隔30划一个虚线
		     	 dis+=30;
		     	 ctx.stroke();
		     }
		     
		     ctx.restore();
		     
		     var xDis=90//设定月份之前的间距
		   	  //绘线条、底部的月份、数据值
		   	  ctx.beginPath();
		      for(var i=0;i<6;i++){//假设有6个月
		      	var height = Math.round(Math.random()*220+20);//在一定范围内随机高度
		      	
		      	var rectX=x0+xDis*i,//x位置
		      		rectY=height;//y位置
		      	
		      	ctx.lineTo(rectX,y0-rectY);//设定线的走向
		      	
		      	ctx.fillText((i+1)+'月份',rectX-10,y0+15);//绘制最下面的月份
		      	
		      	ctx.fillText(rectY,rectX,y0-rectY-5);//显示值
		      }
		      //最后统一划线
		      ctx.stroke();
		}
		

效果图