利用画布绘制折线图

最新推荐文章于 2022-03-02 17:03:46 发布

dianfuhuang8805

最新推荐文章于 2022-03-02 17:03:46 发布

阅读量267

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhen-prz/p/10098026.html

版权

HTML5中<canvas>标签用于绘制图像

不过<canvas>元素本身并没有绘制能力，这是我们需要通过getContext()方法返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。在这里我们绘制一个折线图。

首先在body中创建一个画布，并声明一个ctx的变量

<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var myline = document.querySelector("canvas");
var ctx = myline.getContext("2d");

为了视觉效果，可在画布中绘制一个网格背景，该网格可利用for（）循环来创建，首先声明网格的间距和画布的大小

var griadSize = 10;
var canvasW = ctx.canvas.width;
var canvasH = ctx.canvas.height;
var xNum = parseInt(canvasH/griadSize);
var yNum = parseInt(canvasW/griadSize);

再利用for（）循环

for(var i = 0 ;i < xNum;i++){
ctx.moveTo(0,griadSize*i-0.5);
ctx.lineTo(canvasW,griadSize*i-0.5);
ctx.strokeStyle = "#eee";
ctx.stroke();
}
for(var j = 0 ;j < yNum;j++){
ctx.moveTo(griadSize*j-0.5,0);
ctx.lineTo(griadSize*j-0.5,canvasW);
ctx.strokeStyle = "#eee";
ctx.stroke();
}

然后再在创建X轴和Y轴

//坐标X轴
ctx.beginPath();
var grad = 20;
var x0 = grad;
var y0 = canvasH-grad;
var tra = 10;
ctx.moveTo(x0,y0);
ctx.lineTo(canvasW-2*grad,y0);
ctx.lineTo(canvasW-2*grad-tra,y0-tra/2);
ctx.lineTo(canvasW-2*grad-tra,y0+tra/2);
ctx.lineTo(canvasW-2*grad,y0);
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();
ctx.font = "20px 微软雅黑";
ctx.textBaseline = "middle";
ctx.fillText("X",canvasW-2*grad,canvasH-grad);

//坐标Y轴
ctx.moveTo(x0,y0);
ctx.lineTo(x0,2*grad);
ctx.lineTo(x0-tra/2,2*grad+tra);
ctx.lineTo(x0+tra/2,2*grad+tra);
ctx.lineTo(x0,2*grad);
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";
ctx.fill();
ctx.stroke();
ctx.font = "20px 微软雅黑";
ctx.textAlign="center";
ctx.fillText("Y",x0,2*grad-tra);

创建好之后由数据包导入数据

var arr = [
{
x:0,
y:0
},
{
x:50,
y:80
},
{
x:100,
y:140
},
{
x:200,
y:120
},
{
x:250,
y:200
},
{
x:300,
y:180
},
{
x:450,
y:200
},
{
x:480,
y:300
},
];
ctx.beginPath();
for(var k = 0;k < arr.length;k++){
ctx.lineTo(x0+arr[k].x-0.5,y0-arr[k].y-0.5);
ctx.fillRect(x0+arr[k].x-2,y0-arr[k].y-2,4,4);
ctx.strokeStyle = "#00f";
ctx.stroke();
ctx.font = "15px 微软雅黑";
ctx.textAlign="center";
ctx.textBaseline = "middle";
if(arr[k].x == 0 && arr[k].y == 0){
ctx.fillText("",0,0);
}else{
ctx.fillText(("("+arr[k].x+","+arr[k].y+")"),x0+arr[k].x+17,y0-arr[k].y+15);
}
ctx.fillStyle="#00f";
}

效果图：

转载于:https://www.cnblogs.com/zhen-prz/p/10098026.html

dianfuhuang8805

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用画布绘制折线图

HTML5中<canvas>标签用于绘制图像不过<canvas>元素本身并没有绘制能力，这是我们需要通过getContext()方法返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。在这里我们绘制一个折线图。首先在body中创建一...
复制链接

扫一扫