ホームページ > 記事 > ウェブフロントエンド > キャンバスは直交座標系を描画します
キャンバスは直交座標系を描画します
- 迷茫オリジナル
- 2017-03-25 13:58:063208ブラウズ
canvas直交座標系の描画
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。