ホームページ > 記事 > ウェブフロントエンド > キャンバスは直交座標系を描画します
2017年3月17日
キャンバスを使用して直交座標系を描画するのは、実際には非常に簡単です。原点 (0, 0) が決まれば、他の点でも構いません。知っていればそこがスタート地点です!原点がわかったら、X 軸と Y 軸の方向に 2 本の直線を描くだけです (X 軸と Y 軸も相対的であり、これは純粋に個人の好みと実際のニーズによって異なります)。
これ以上の苦労はせずに、コードを見てみましょう:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas画直角坐标系和柱状图</title> </head> <body> <h1>canvas画直角坐标系及柱状图</h1> <canvas id="canvas" width="600" height="400">如果您只看到了这句话,那么您的浏览器该升级换代了!</canvas> <!--canvas的宽高即可以设置成行内样式,也可以通过Js设置,不过建议设置成行内样式--> <script src="js/drawChart.js" type="text/javascript" charset="utf-8"></script> <!--为了表现与样式分离同时为了页面简洁,引入一个外部js文件--> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var cxt = canvas.getContext("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); </script> </body> </html>
次に、直交座標系の描画方法があります (関数がより完全でコード サイズをより合理化できるとマスターが判断した場合は、お気軽に教えてください、ありがとう):
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) }
次に、ヒストグラムを描画する方法を示します:
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<arr.length;i++ ) {//for循环用来遍历数组内数据 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.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) } }
それでもグラフをより美しく見せたい場合は、shadowColor、shadowOffsetX、shadowOffsetY およびその他の関連プロパティを使用して影を設定できます。キャンバスによって提供されます。
同時に、柱の頂点を中心にして、柱とは少し違う色の楕円を描きます。
以上がキャンバスは直交座標系を描画しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。