HTML5绘图之Canvas标签 绘制坐标轴

因为最近在做数据的统计，需要表现在网页上 也查过一些插件和一些绘图语言，学习时间成本太高，所以用上了HTML5的Canvas标签和JavaScript，可以很快的满足我需要的绘图需求

---

JavaScript中前两句：

var canvas1=document.getElementById(“canvas1”); 
var context=canvas1.getContext(“2d”); 

第一句获取在HTML中的canvas
第二句得到canvas内置的绘图对象，目前只支持2d
这两句一般为通用格式

写一个函数 function pageLoad()：

        var x0=0.1*canvas1.width;
        var y0=0.9*canvas1.height;
        //the begin of the axis
        var widthAx=0.8*canvas1.width;
        var heightAx=0.8*canvas1.height;
        //the width and height of the axis system

上面是获取到圆点的坐标和坐标轴的长宽度
Canvas的坐标和openGL一致，右上角为原点

context.moveTo(0.1*canvas1.width,0.1*canvas1.height);
context.lineTo(0.1*canvas1.width,0.9*canvas1.height);
context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
context.moveTo(0.09*canvas1.width,0.115*canvas1.height);
context.lineTo(0.1*canvas1.width,0.