画图的时候会创建一个canvas，画一些元素的时候需要计算图形在canvas上的坐标，这时候在canvas上的坐标系是这样的。
 
 有时候为了方便可以，将起始点放在canvas中间，然后将y轴的方向改为向上：
 
 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 原来坐标系的起点在canvas的左上角（0, 0)，现在将起点定在(128, 128)这个点上
ctx.translate(128, 128);
// 原先y轴是向下的，现在改为向上
ctx.scale(1, -1);
 
有时候选择坐标系，可以简化坐标的计算量，不仅让代码容易理解，也节省了CPU运算的时间。

 
 
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
 
 
教程介绍、教程目录等能在README里查阅。
 
 
传送门：https://github.com/827652549/CanvasStudy
 
 
介绍
 
使用Canvas绘制具有x，y轴的直角坐标轴，并在轴上绘制相应的刻度条。
 
 
演示
 
在线演示
 
代码教程
 
通过常量来计算坐标轴属性，例如坐标轴宽高，刻度线间距等等，设置好这些属性后，剩余代码基本上都在按照beginPath()、moveTo()、lineTo()、stroke()的顺序绘制坐标轴和其刻度线。
 
所有的相关常量含义和方法说明都以注释的形式写在了代码之中。
 
详细代码
 
 

 
 
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
 
 
教程介绍、教程目录等能在README里查阅。
 
 
传送门：https://github.com/827652549/CanvasStudy
 
 
介绍
 
我们之前介绍了坐标轴的绘制，但是没有添加数字标签表示刻度。现在直接在上个坐标轴版本上完善添加数字标签，效果如图所示。
 
在线演示  详细代码
 
 
 请注意，应用程序会设置textAlign和textBaseline的值，在绘制水平坐标轴上文本标签分别设置”center“和”top“，在绘制垂直坐标轴时，则设置“right”和”middle“。
 
 
 

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