canvas画直角坐标系 - shbwh-tswq

      2020-09-14 12:48      HTML5
canvas画直角坐标系

2017年3月17日

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

闲话不多说直接看代码:

canvas画直角坐标系和柱状图canvas画直角坐标系及柱状图<!--为了表现与样式分离同时为了页面简洁,引入一个外部js文件-->););).hide(););

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

1 function Coordinate(x,y){originX = x; 4var originY = y;cxt.font = "2rem 微软雅黑";cxt.strokeStyle = "black";cxt.lineWidth = 3;     cxt.beginPath();cxt.moveTo(originX,originY);cxt.lineTo(originX,originY-320);cxt.stroke();cxt.moveTo(originX,originY-320);cxt.lineTo(originX+3,originY-310);cxt.stroke();20cxt.moveTo(originX,originY-320);21cxt.lineTo(originX-3,originY-310);22 cxt.stroke();   cxt.moveTo(originX,originY);26cxt.lineTo(originX+450,originY);27 cxt.stroke();cxt.moveTo(originX+450,originY);30cxt.lineTo(originX+440,originY-3);31 cxt.stroke();32cxt.moveTo(originX+450,originY);33cxt.lineTo(originX+440,originY+3);34 cxt.stroke();35cxt.fillText("Y轴",originX-5,originY-325)36}

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

function ColumnChart1(x,y,arr){//绘制之前先清空原有的柱状图所占区域cxt.clearRect(x,y,500,0);.arr= arr;(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.moveTo(originX+(i+1)*20,originY);//柱子的顶点位置,这里因为数组内数字小,所以都乘十了,这样有利于小数字的表现cxt.lineTo(originX+(i+1)*20,originY-(arr[i]*10));//调整每根柱子的间距;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等相关属性设置阴影。

同时以柱子的顶点为圆心画一个颜色略异于柱子的椭圆即可。