标签：数组 selector text 一起 get 绘制 for mat sele
一、绘制折线图
1、首先，随便定义一个数组对象代表坐标，然后绘出打底的网格线：
<canvas width="600px" height="400px" ></canvas>
<script>
var mycanvas=document.querySelector("canvas");
var pan=mycanvas.getContext("2d");
var wid=mycanvas.width;
var high=mycanvas.height;
var sz=[
{
x:50,
y:300
},
{
x:150,
y:100
},
{
x:200,
y:200
},
{
x:400,
y:300
},
{
x:500,
y:50
}
]
for (i=1;i<Math.floor(high/10);i++) {
pan.moveTo(0,10*i+0.5);
pan.lineTo(wid,10*i+0.5);
pan.strokeStyle="#eee";
pan.stroke();
}
for (j=1;j<Math.floor(wid/10);j++) {
pan.moveTo(10*j+0.5,0);
pan.lineTo(10*j+0.5,high);
pan.strokeStyle="#eee";
pan.stroke();
}
2、绘出x轴y轴：
pan.beginPath(); pan.moveTo(20,high-20); pan.lineTo(560,high-20); pan.lineTo(550,high-25); pan.lineTo(550,high-15); pan.lineTo(560,high-20); pan.moveTo(20,high-20); pan.lineTo(20,40); pan.lineTo(15,50); pan.lineTo(25,50); pan.lineTo(20,40); pan.strokeStyle="#000"; pan.stroke(); pan.fill(); pan.fillText("X",570,high-20); pan.fillText("Y",20,30);
3、根据定义的坐标绘出相应的折线图：
由于canvas原点跟我们定义的坐标原点有差距，绘图的关键在于将定义的坐标换算成相对于canvas的坐标表示，找到准确的对应点。注意每个折点绘制小方块的时候重新开始一个新路径，不然会与已绘出的折线连在一起，影响本身应有的效果。
pan.beginPath(); var prevX = 20; var prevY = high-20; for (var m=0;m<sz.length;m++) { pan.moveTo(prevX,prevY); pan.lineTo(20+sz[m].x,high-20-sz[m].y); pan.rect(20+sz[m].x-2.5,high-20-sz[m].y-2.5,5,5); pan.fillStyle="blueviolet"; pan.strokeStyle="blueviolet"; pan.stroke(); pan.fill(); pan.fillText("("+sz[m].x+","+sz[m].y+")",20+sz[m].x,high-20-sz[m].y); prevX = 20+sz[m].x; prevY = high-20-sz[m].y; } </script>
二、绘制柱状图
1、与绘制折线图相似，绘制打底网格，x轴y轴，根据数据换算成相对canvas的坐标，值得注意的是绘制柱状矩形的时候留意矩形的起点坐标和方向、宽高，如有发现不对应的情况及时找出问题并修改。
<canvas width="800px" height="500px" ></canvas>
<script>
var mycanvas=document.querySelector("canvas");
var pan=mycanvas.getContext("2d");
var wid=mycanvas.width;
var high=mycanvas.height;
var sz=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
var sz2=[80,180,230,95,200,340,290];
for (i=1;i<=Math.floor(high/100);i++) {
pan.moveTo(50,80*i+0.5);
pan.lineTo(wid-50,80*i+0.5);
pan.strokeStyle="#eee";
pan.stroke();
pan.textAlign="right";
pan.fillText(500-100*i,45,80*i+0.5)
}
pan.beginPath();
pan.moveTo(50,400);
pan.lineTo(750,400);
pan.moveTo(50,400);
pan.lineTo(50,78);
pan.strokeStyle="#000";
pan.stroke();
for (j=0;j<7;j++) {
pan.moveTo(100+90*j,400);
pan.lineTo(100+90*j,405);
pan.stroke();
var mylinear=pan.createLinearGradient(100,400,100,20);
mylinear.addColorStop(0,"#00f");
mylinear.addColorStop(1,"#0f0");
pan.rect(100+90*j-20,400-sz2[j],40,sz2[j]);
pan.fillStyle=mylinear;
pan.fill();
pan.textAlign="center";
pan.fillText(sz[j],100+90*j,420);
pan.fillText(sz2[j],100+90*j,400-sz2[j]-10);
pan.fillStyle="#000000";
}
标签：数组 selector text 一起 get 绘制 for mat sele
原文地址：https://www.cnblogs.com/lznzxy/p/10110633.html
