Canvas绘制坐标轴、折线图

body{
background:black;
}
canvas{
border: 1px solid saddlebrown;
}





var cvs=document.getElementById(“cvs”);
var ctx =cvs.getContext(“2d”);
var padding={
top:10,
left:10,
right:10,
bottom:10
}
var arrow={
width:10,
height:20
}
//绘制坐标轴上方
var vertexTop={
x:padding.left,
y:padding.top
}
//绘制原点
var origin={
x:padding.left,
y:cvs.height-padding.bottom
}
//绘制下方点
var vertexBottom={
x:cvs.width-padding.right,
y:cvs.height-padding.bottom
}
;
//绘制线
ctx.moveTo(vertexTop.x,vertexTop.y);
ctx.lineTo(origin.x,origin.y);
ctx.lineTo(vertexBottom.x,vertexBottom.y);
ctx.stroke();
//绘制上箭头
ctx.beginPath();
ctx.moveTo(vertexTop.x,vertexTop.y);
ctx.lineTo(vertexTop.x-arrow.width/2,vertexTop.y+arrow.height);
// ctx.moveTo(vertexTop.x,vertexTop.y);
ctx.lineTo(vertexTop.x,vertexTop.y+arrow.height/2);
ctx.lineTo(vertexTop.x+arrow.width/2,vertexTop.y+arrow.height);
ctx.closePath();
ctx.fill();
// ctx.stroke();
//绘制右箭头
ctx.moveTo(vertexBottom.x,vertexBottom.y);
ctx.lineTo(vertexBottom.x-arrow.height,vertexBottom.y-arrow.width/2);
//让箭头变得有质感
ctx.lineTo(vertexBottom.x-arrow.height/2,vertexBottom.y);
ctx.lineTo(vertexBottom.x-arrow.height,vertexBottom.y+arrow.width/2);
// ctx.closePath();
ctx.closePath();
ctx.fill();

// //在指定位置随意画一点
// ctx.fillRect(origin.x+100,origin.y-100,10,10);
// //在坐标轴上画四个点([10,10],[50,70],[30,20],[40,60])
// var points=[[10,10],[30,70],[80,20],[110,60]];
// points.forEach(function(arr){
// ctx.fillRect(origin.x+arr[0],origin.y-arr[1],2,2);
// })
// //画折线
// ctx.beginPath();
// points.forEach(function(arr){
// ctx.lineTo(origin.x+arr[0],origin.y-arr[1]);
// })
// ctx.stroke();

    //等比例
    // 求坐标轴默认可显示数据的最大值
    coordMaxX = cvs.width - padding.left - padding.right - arrow.height;
    coordMaxY = cvs.height - padding.top - padding.bottom - arrow.height;

    var data = [ 10, 2, 40, 60, 120, 180, 100, 50, 2 ];
    // 求数据缩放的比例
    var ratioX = coordMaxX / data.length;
    var ratioY = coordMaxY / Math.max.apply( null, data );
    // 根据比例，对元数据进行缩放
    var ratioData = data.map( function( val, i ) {
        return val * ratioY;
    });

        // 画点
    ratioData.forEach( function( val, index ) {
        ctx.fillRect( origin.x + ( index * ratioX) - 2, origin.y - val - 2, 4, 4 );
    });

    // 画折线
    ctx.beginPath();
    ratioData.forEach( function( val, index ) {
        ctx.lineTo( origin.x + ( index * ratioX), origin.y - val );
    });
   ctx.stroke();

    //数据可视化

// data.forEach(function(val,index){
// ctx.fillRect(origin.x + index*20-2,origin.y-val-2,4,4);
// })
// // //画折线
// ctx.beginPath();
// data.forEach(function(val,index){
// ctx.lineTo(origin.x + index*20,origin.y-val);
// })
// ctx.stroke();