canvas 面向对象绘制折线图

最新推荐文章于 2021-01-01 12:31:16 发布

天马行空zqzq

最新推荐文章于 2021-01-01 12:31:16 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/106016403

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600px" height="400px"></canvas>
<script>
    //构造函数
    //属性
    var LineChart=function(ctx){
        this.myCanvas=document.querySelector("canvas");
        this.ctx=ctx || this.myCanvas.getContext("2d");
        this.canvasHeight=this.ctx.canvas.height;
        this.canvasWidth=this.ctx.canvas.width;
        //确定网格大小
        this.gridSize=10;
        //确定坐标系的间距
        this.space=20;
        //确定箭头的大小
        this.arrowSize=10;
        //点的大小
        this.dottedSize=6;
    };
    //行为方法
    LineChart.prototype.init=function(data){
        this.drawGrid();
        this.drawAxis();
        this.drawDotted(data);
    };
    //画坐网格
    LineChart.prototype.drawGrid=function(){
        //确定画几条x轴方向的线
        var xLineTotal=Math.floor(this.canvasHeight/this.gridSize);
        //确定画几条y轴方向的线
        var yLineTotal=Math.floor(this.canvasWidth/this.gridSize);
        //画x方向的线
        for(var i=0;i<xLineTotal;i++){
            this.ctx.beginPath();
            this.ctx.moveTo(0,i*this.gridSize-0.5);
            this.ctx.lineTo(this.canvasWidth,i*this.gridSize-0.5);
            this.ctx.strokeStyle="#eee";
            this.ctx.stroke();
        }
        //画y方向的线
        for(var j=0;j<yLineTotal;j++){
            this.ctx.beginPath();
            this.ctx.moveTo(j*this.gridSize-0.5,0);
            this.ctx.lineTo(j*this.gridSize-0.5,this.canvasHeight);
            this.ctx.strokeStyle="#eee";
            this.ctx.stroke();
        }
    };
    //画坐标系
    LineChart.prototype.drawAxis=function(){
        this.ctx.beginPath();
        this.ctx.moveTo(this.space,this.canvasHeight-this.space);
        this.ctx.lineTo(this.canvasWidth,this.canvasHeight-this.space);
        this.ctx.lineTo(this.canvasWidth-this.arrowSize,this.canvasHeight-this.space+this.arrowSize/2);
        this.ctx.lineTo(this.canvasWidth-this.arrowSize,this.canvasHeight-this.space-this.arrowSize/2);
        this.ctx.lineTo(this.canvasWidth,this.canvasHeight-this.space);
        this.ctx.fill();
        this.ctx.strokeStyle="black";
        this.ctx.stroke();
        this.ctx.beginPath();
        this.ctx.moveTo(this.space,this.canvasHeight-this.space);
        this.ctx.lineTo(this.space,0);
        this.ctx.lineTo(this.space-this.arrowSize/2,this.arrowSize);
        this.ctx.lineTo(this.space+this.arrowSize/2,this.arrowSize);
        this.ctx.lineTo(this.space,0);
        this.ctx.strokeStyle="black";
        this.ctx.fill();
        this.ctx.stroke();
    };
    //画坐点

    LineChart.prototype.drawDotted=function(data){
        var that=this;
        var preX=that.space;
        var preY=that.canvasHeight-that.space;
        data.forEach(function(item,i){
            //要把坐标转换成canvas的坐标
            var x0=item.x+that.space-that.dottedSize/2;
            var y0=that.canvasHeight-(item.y+that.space)-that.dottedSize/2;
            that.ctx.beginPath();
            that.ctx.moveTo(x0,y0);
            that.ctx.lineTo(x0+that.dottedSize,y0);
            that.ctx.lineTo(x0+that.dottedSize,y0+that.dottedSize);
            that.ctx.lineTo(x0,y0+that.dottedSize);
            that.ctx.lineTo(x0,y0);
            that.ctx.fill();
            that.ctx.stroke();
            that.ctx.beginPath();
            //连点
            that.ctx.moveTo(preX,preY);
            that.ctx.lineTo(item.x+that.space,that.canvasHeight-(item.y+that.space));
            that.ctx.stroke();
            preX=item.x+that.space;
            preY=that.canvasHeight-(item.y+that.space);
        });
        };
    var data = [
        {
            x:100,
            y:120
        },
        {
            x:200,
            y:160
        },
        {
            x:300,
            y:240
        },
        {
            x:400,
            y:320
        },
        {
            x:500,
            y:80
        }
    ];
    var lineChart=new LineChart();
    lineChart.init(data);
</script>
</body>
</html>

天马行空zqzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 面向对象绘制折线图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style></head><body>.
复制链接

扫一扫