html绘制直⾓坐标系,canvas画直⾓坐标系
canvas画直⾓坐标系
2017年3⽉17⽇
利⽤canvas画直⾓坐标系其实挺简单的，只要确定了原点(0，0)点，也可以是其他的点，只要⾃⼰知道那是原点就⾏！知道了原点再分别向X轴⽅向和Y轴⽅向画两条直线即可(X轴和Y轴也是相对的，这个纯看个⼈喜好和实际需求)。
闲话不多说直接看代码：
canvas画直⾓坐标系和柱状图
canvas画直⾓坐标系及柱状图
如果您只看到了这句话，那么您的浏览器该升级换代了！
var ElementById("canvas");
var cxt = Context("2d");
//通过id获取canvas画布，并获得cxt画笔，canvas⽬前只⽀持2d效果，所以“2d”不能省；
var arr = [16,15,20,21]//利⽤数组模拟柱状图的数据
Coordinate(50,350);//⾃⼰写的⼀个直⾓坐标系
ColumnChart1(50,350,arr); //⼀个简单的柱状图函数
/*为了有个简单的动画效果，canvas绘制完成以后先将它隐藏，然后⽤jQuery的slideDown()⽅法淡⼊显⽰*/
$("#canvas").hide();
$("#canvas").slideDown(1000);
然后就是直⾓坐标系的绘制⽅法(如果那位⼤神看到了功能更加完善，代码量可以更加精简的，请不吝赐教，谢谢)：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.lineTo(originX,originY-320);//轴的终点位置，即X⼤⼩不变，只是改变了Y点位置(根据实际情况做调整)；
cxt.stroke();//将这条线绘制出来
//画⼩箭头
cxt.lineTo(originX+3,originY-310);//originX+3和originY-310是设置⼩箭头的终点位置，⼩箭头的⼤⼩和尖锐程度请⾃⾏摸索
cxt.stroke();
cxt.lineTo(originX-3,originY-310);
cxt.stroke();
//画横坐标
//绘制X轴和Y轴相似
cxt.lineTo(originX+450,originY);
cxt.stroke();
//画⼩箭头
cxt.lineTo(originX+440,originY-3);
cxt.stroke();
cxt.lineTo(originX+440,originY+3);
cxt.stroke();
cxt.fillText("Y轴",originX-5,originY-325)
}
然后就是柱状图的绘制⽅法：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
if(i==0){
var originX = x+40;
var originY = y-1;
}else{
var originX = i*70+80;
var originY = y-1;
}
cxt.beginPath();
cxt.strokeStyle = arrColor[i];//设置线条颜⾊
cxt.lineWidth = 20;//这⾥为了⽅便直接将线条的宽度设置为20，这样就可以模拟柱⼦
cxt.stroke();
cxt.font = "20px 宋体"
cxt.fillText(arr[i],originX+(i+1)*20-10,originY-(arr[i]*10+3));
//⽂字的绘制
cxt.font = "13px 宋体"
cxt.fillText("第"+(i+1)+"季度业绩",originX+(i+1)*20-35,originY+20)
}
}
如果还想图表看起来更加美观，可以⽤canvas提供的shadowColor、shadowOffsetX、shadowOffsetY等相关属性设置阴影。同时以柱⼦的顶点为圆⼼画⼀个颜⾊略异于柱⼦的椭圆即可。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论