canvas画直角坐标系

2017年3月17日

利用canvas画直角坐标系其实挺简单的，只要确定了原点（0，0）点，也可以是其他的点，只要自己知道那是原点就行！知道了原点再分别向X轴方向和Y轴方向画两条直线即可（X轴和Y轴也是相对的，这个纯看个人喜好和实际需求）。

闲话不多说直接看代码：

    
        
        
    
    
        
canvas画直角坐标系及柱状图
        如果您只看到了这句话，那么您的浏览器该升级换代了！
             
        
        
        
    

然后就是直角坐标系的绘制方法（如果那位大神看到了功能更加完善，代码量可以更加精简的，请不吝赐教，谢谢）：

function Coordinate(x,y){
        //x为横坐标起点，Y为纵坐标起点
              var originX = x;
               var originY = y;
             //设置原点的那个文字的样式，并绘制出来
               cxt.font = "2rem 微软雅黑";
               cxt.fillText("0",originX-10,originY+15);//此处-10和+15是为了调整字的位置

              cxt.strokeStyle = "black";//设置坐标系X轴Y轴的颜色，绘制线条用strockeStyle属性，绘制填充色块用fillStyle属性；
             cxt.lineWidth = 3;//设置线条粗细，这里为了方便看设置了3个像素，可以根据情况自行调整
           //开始绘制Y轴
　　　　 cxt.beginPath();//开启路径
             cxt.moveTo(originX,originY);//x轴与y轴的起点位置
             cxt.lineTo(originX,originY-320);//轴的终点位置，即X大小不变，只是改变了Y点位置（根据实际情况做调整）；
             cxt.stroke();//将这条线绘制出来
          //画小箭头
           cxt.moveTo(originX,originY-320);//小箭头起点位置即为Y轴终点位置
            cxt.lineTo(originX+3,originY-310);//originX+3和originY-310是设置小箭头的终点位置，小箭头的大小和尖锐程度请自行摸索
            cxt.stroke();
            cxt.moveTo(originX,originY-320);
            cxt.lineTo(originX-3,originY-310);
           cxt.stroke();
          //画横坐标
  　　　//绘制X轴和Y轴相似
          cxt.moveTo(originX,originY);
          cxt.lineTo(originX+450,originY);
          cxt.stroke();
         //画小箭头
         cxt.moveTo(originX+450,originY);
         cxt.lineTo(originX+440,originY-3);
        cxt.stroke();
         cxt.moveTo(originX+450,originY);
         cxt.lineTo(originX+440,originY+3);
         cxt.stroke();
         cxt.fillText("Y轴",originX-5,originY-325)
     }

然后就是柱状图的绘制方法：

Extjs简单版酒店管理系统 bulid 081016

该系统采用VS2005+SQL2000+Extjs2.0开发由于学extjs 一月不到 属初学者，项目有很多不足地方请见谅(注释不标准按自己想法随意注释了一下)数据库脚本:压缩包目录下.DB.sql便是该项目为双用户：管理员 与营业员 角色登陆显示不同信息数据库方面一小部分功能运用存储过程或者直接附加DB_51aspx下Sql数据库文件

下载

function ColumnChart1(x,y,arr){
        //绘制之前先清空原有的柱状图所占区域
        cxt.clearRect(x,y,500,0);
        var arrColor = ["red","yellow","blue","purple","green","mauve"];//为了使每个柱子的颜色不一样，如果可以尽量用#******或rgb（）方法设置颜色，因为我这样直接用单词有些浏览器对个别颜色不识别（头疼的IE）
        //请务必保持x，y值与坐标系的x，y值相同
        this.arr= arr;
        for (var i=0;i
如果还想图表看起来更加美观，可以用canvas提供的shadowColor、shadowOffsetX、shadowOffsetY等相关属性设置阴影。
同时以柱子的顶点为圆心画一个颜色略异于柱子的椭圆即可。