构造函数绘制canvas折线图

最新推荐文章于 2021-06-03 00:12:40 发布

ヽ错落不堪的年华。

最新推荐文章于 2021-06-03 00:12:40 发布

阅读量191

点赞数

分类专栏：技术交流前端小功能技术总结数学文章标签：构造函数 canvas js javascript 前端

本文链接：https://blog.csdn.net/qq_44777678/article/details/92800243

版权

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>构造函数canvas折线图</title>
    <style>
        canvas{
            border: 1px solid #ccc;
            display: block;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <canvas width="600" height="600"></canvas>
    <script>
        // 构造函数
        var LineChart = function(ctx){
            // 获取上下文
            this.ctx = ctx || document.querySelector('canvas').getContext('2d');
            // 画布的大小
            this.canvaswidth = this.ctx.canvas.width;
            this.canvasheight = this.ctx.canvas.height;

            // 网格的大小
            this.gridSize = 10;

            // 坐标系的间距
            this.space = 20;

            // 箭头的大小
            this.arrowSize = 10;

            // 点的大小
            this.dottedSize = 6;

            // 坐标原点
            this.x0 = this.space;
            this.y0 = this.canvasheight - this.space;

        };
        // 行为方法
        LineChart.prototype.init = function(data){
            this.drwaGrid();
            this.drawAxis();
            this.drawDoted(data);
        };

        // 绘制网格
        LineChart.prototype.drwaGrid = function(){
            // x方向的线
            var xlineTotal = Math.floor(this.canvasheight / this.gridSize);
            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轴为起点
            var ylineTotal = Math.floor(this.canvaswidth / this.gridSize);
            for(var i=0; i<=ylineTotal; i++  ){
                this.ctx.beginPath();//开启新路径
                this.ctx.moveTo(i * this.gridSize - 0.5,0); //起点
                this.ctx.lineTo(i * this.gridSize - 0.5,this.canvasheight); //终点
                this.ctx.strokeStyle = '#eee';
                this.ctx.stroke();
            }
        };
        // 绘制坐标系
        LineChart.prototype.drawAxis = function(){
            // x轴
            this.ctx.beginPath();//开启新路径
            this.ctx.strokeStyle = '#000';
            this.ctx.moveTo(this.x0,this.y0); //起点
            this.ctx.lineTo(this.canvaswidth - this.space,this.y0);
            // 箭头
            this.ctx.lineTo(this.canvaswidth - this.space -this.arrowSize, this.y0 + this.arrowSize / 2);
            this.ctx.lineTo(this.canvaswidth - this.space -this.arrowSize, this.y0 - this.arrowSize / 2);
            this.ctx.lineTo(this.canvaswidth - this.space, this.y0);
            this.ctx.fill();
            this.ctx.stroke();
            
            // y轴
            this.ctx.beginPath();
            this.ctx.moveTo(this.x0,this.y0);
            this.ctx.lineTo(this.space,this.space);

            // 箭头
            this.ctx.lineTo(this.space + this.arrowSize / 2,this.space + this.arrowSize);
            this.ctx.lineTo(this.space - this.arrowSize / 2,this.space + this.arrowSize);
            this.ctx.lineTo(this.space,this.space);
            this.ctx.fill();
            this.ctx.stroke();
        };  

        /*绘制所有点*/
        LineChart.prototype.drawDoted = function (data) {
            
            // 重新定义this
            var that = this;

            // 记录当前的坐标
            var psaacanvasX = 0;
            var psaacanvasY = 0;

            data.forEach(function (item, i) {
                /*数据的坐标 需要转换 canvas坐标*/
                /* x = 原点的坐标 + 数据的坐标 */
                /* y = 原点的坐标 - 数据的坐标 */
                var canvasX = that.x0 + item.x;
                var canvasY = that.y0 - item.y;
                /*绘制点*/
                that.ctx.beginPath();
                that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
                that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
                that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
                that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
                that.ctx.closePath();
                that.ctx.fill();
                if( i == 0 ){
                    that.ctx.beginPath();
                    that.ctx.moveTo(that.x0,that.y0);
                    that.ctx.lineTo(canvasX,canvasY);
                    that.ctx.stroke();
                }else{
                    that.ctx.beginPath();
                    that.ctx.moveTo(psaacanvasX,psaacanvasY);
                    that.ctx.lineTo(canvasX,canvasY);
                    that.ctx.stroke();
                }
                    // 记录当前坐标下一次要用
                    psaacanvasX = canvasX;
                    psaacanvasY = canvasY;           
                });
            };
        /*3.初始化*/
        var data = [
                    {
                        x: 100,
                        y: 120
                    },
                    {
                        x: 200,
                        y: 160
                    },
                    {
                        x: 300,
                        y: 240
                    },
                    {
                        x: 400,
                        y: 120
                    },
                    {
                        x: 500,
                        y: 80
                    }
                ];
        var lineChart = new LineChart();
        lineChart.init(data);
    </script>
</body>
</html>