初探canvas制作一个折线图——（面向对象）

最新推荐文章于 2024-08-07 18:00:00 发布

$(薛定谔的喵)

最新推荐文章于 2024-08-07 18:00:00 发布

阅读量965

点赞数

本文链接：https://blog.csdn.net/Chad97/article/details/83547300

版权

本文介绍了如何利用HTML5的canvas元素，通过面向对象的方式创建一个折线图。从设置画布到展示效果，详细阐述了绘制过程。

摘要由CSDN通过智能技术生成

canvas

准备一块画布

 <style>
        canvas {
    
            border: 1px solid #ccc;
        }
    </style>
<canvas width="600" height="400"></canvas>

起步——start

<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    //构造函数
    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.x0=this.space;
        this.y0=this.canvasHeight-this.space;
        //绘制点
        this.dottedSize=6;
        //点的坐标——和数据有关系，数据可视化

    };
    //行为方法
    lineChart.prototype.init=function (data) {
   
        this.drawGrid();
        this.drawAxis();
        this.drawDotted(data)