【Canvas】(2)---繪製折線圖

時間 2020-04-25

標籤 Canvas 繪製折線简体版

原文原文鏈接

繪製折線圖

以前在工做的時候,用過百度的ECharts繪製折線圖,上手很簡單,這裏經過canvas繪製一個簡單的折線圖。這裏將一整個繪製過程分爲幾個步驟:html

一、繪製網格 二、繪製座標系 三、繪製點 四、將前面三部分組合繪製一整個完整的折線圖。canvas

1、繪製網格

代碼函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #00CED1;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.繪製網格*/
    /*2.網格的大小*/
    var gridSize = 10;
    var canvasHeight = ctx.canvas.height;
    var canvasWidth = ctx.canvas.width;
    /*3.畫多少條X軸方向的線 X軸的條數 = 畫布高度/網格大小*/
    var xLineTotal = Math.floor(canvasHeight / gridSize);
    for (var i = 0; i <= xLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize);
        ctx.lineTo(canvasWidth, i * gridSize);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
    /*4.畫多少條Y軸方向的線  Y軸的條數 = 畫布寬度/網格大小*/
    var yLineTotal = Math.floor(canvasWidth / gridSize);
    for (var i = 0; i <= yLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(i*gridSize ,0);
        ctx.lineTo(i*gridSize ,canvasHeight);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
</script>
</body>
</html>

運行結果工具

2、繪製座標系

代碼this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            border: 1px solid #00CED1;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.繪製座標系*/
    /*2.肯定原點*/
    /*3.肯定距離畫布旁邊的距離*/
    /*4.肯定座標軸的長度*/
    /*5.肯定箭頭的大小  是個等腰三角形  10 */
    /*6.繪製箭頭填充*/
    var space = 20;
    var arrowSize = 10;
    /*計算原點*/
    var canvasWidth = ctx.canvas.width;
    var canvasHeight = ctx.canvas.height;
    //原點座標
    var x0 = space;
    var y0 = canvasHeight - space;
    /*繪製x軸*/
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(canvasWidth - space, y0);
    /*箭頭 三角形 原點 左下 左上 原點*/
    ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
    ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
    ctx.lineTo(canvasWidth - space, y0);
    //填充
    ctx.fill();
    ctx.stroke();

    /*繪製y軸*/
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(space, space);
    /*箭頭*/
    ctx.lineTo(space + arrowSize / 2, space + arrowSize);
    ctx.lineTo(space - arrowSize / 2, space + arrowSize);
    ctx.lineTo(space, space);
    ctx.fill();
    ctx.stroke();
</script>
</body>
</html>

運行結果spa

3、繪製點

代碼prototype

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            border: 1px solid #00CED1;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    /*1.繪製點*/
    /*2.點的尺寸*/
    /*3.以座標中心繪製點*/
    /*點座標*/
    var coordinate = {
        x:100,
        y:100
    }
    /*點尺寸*/
    var dottedSize = 10;
    //相對於正方形 左上 -> 右上 -> 右下 -> 左下
    ctx.moveTo(coordinate.x - dottedSize / 2,coordinate.y - dottedSize / 2);
    ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y - dottedSize / 2);
    ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y + dottedSize / 2);
    ctx.lineTo(coordinate.x - dottedSize / 2,coordinate.y + dottedSize / 2);
    ctx.closePath();
    ctx.fill();
</script>
</body>
</html>

運行結果code

4、完整折線圖

先展現效果。htm

代碼blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #00CED1;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    /*1.構造函數*/
    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.x0 = this.space;
        this.y0 = this.canvasHeight - this.space;
        /*箭頭的大小*/
        this.arrowSize = 10;
        /*繪製點*/
        this.dottedSize = 6;
        /*點的座標 和數據有關係  數據可視化*/
    }
    /*2.行爲方法*/
    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);
        this.ctx.strokeStyle = '#eee';
        for (var i = 0; i <= xLineTotal; i++) {
            this.ctx.beginPath();
            this.ctx.moveTo(0, i * this.gridSize);
            this.ctx.lineTo(this.canvasWidth, i * this.gridSize);
            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);
            this.ctx.lineTo(i * this.gridSize, this.canvasHeight);
            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.stroke();
        this.ctx.fill();
        /*Y軸*/
        this.ctx.beginPath();
        this.ctx.strokeStyle = '#000';
        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.stroke();
        this.ctx.fill();
    };
    /*繪製全部點*/
    LineChart.prototype.drawDotted = function (data) {
        /*1.數據的座標 須要轉換 canvas座標*/
        /*2.再進行點的繪製*/
        /*3.把線連起來*/
        var that = this;
        /*記錄當前座標*/
        var prevCanvasX = 0;
        var prevCanvasY = 0;
        data.forEach(function (item, i) {
            /* 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();
            /*點的連線*/
            /*當時第一個點的時候 起點是 x0 y0*/
            /*當時不是第一個點的時候 起點是 上一個點*/
            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(prevCanvasX,prevCanvasY);
                that.ctx.lineTo(canvasX,canvasY);
                that.ctx.stroke();
            }
            /*記錄當前的座標，下一次要用*/
            prevCanvasX = canvasX;
            prevCanvasY = 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>

``` 別人罵我胖，我會生氣，由於我內心認可了我胖。別人說我矮，我就會以爲可笑，由於我內心知道我不可能矮。這就是咱們爲何會對別人的攻擊生氣。攻我盾者，乃我心裏之矛(10) ```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。