利用canvas实现折线图的绘制
来源:互联网 发布:ant java 参数 编辑:程序博客网 时间:2024/05/21 09:32
我们知道现在的很多H5的小游戏的开发都是基于canvas这个画布的,其实canvas之所以这么强大考的是他强大的API库的结果,知道一些canvas的基本API并且可以利用这些API是一个前端开发人员的基本素质,那么我们今天就来跟着小编来一起利用面向对象的思想来封装一个折线图的绘制
html代码
<canvas style="border:1px solid red" width="500" height="500"></canvas> </body>JavaScript代码
<script>//获取canvas的dom元素var cvs=document.querySelector("canvas");//创建绘制环境var cxt=cvs.getContext("2d"); /* * constructor { LineChart } 折线图构造函数 * param { ctx: Context } 绘图上下文 * param { paddingArr: Array } 折线图到画布四边的距离,存储顺序为上右下左 * param { arrowArr: Array } 折线图中箭头的宽和高 * param { data: Array } 存储了折线图中所需的数据 * */ function LineChart(ctx,paddingArr,arrowArr,data){ this.ctx=ctx; this.paddingArr=paddingArr; this.arrowArr=arrowArr; this.data=data; this.arrowHeight=arrowArr[0]; this.arrowWidth=arrowArr[1]; //计算上顶点的距离 this.vertexTop={ x:this.paddingArr[3], y:this.paddingArr[0] }; //计算原点的距离 this.origin={ x:this.paddingArr[3], y:this.ctx.canvas.height-this.paddingArr[2] }; //计算右边点的距离 this.vertexRight={ x:this.ctx.canvas.width-this.paddingArr[1], y:this.ctx.canvas.height-this.paddingArr[2] }; this.process(); } LineChart.prototype={ //设置构造函数 constructor:LineChart, //绘制坐标轴中的两条线 drawZuobiao:function(){ this.ctx.beginPath(); this.ctx.moveTo(this.vertexTop.x, this.vertexTop.y); this.ctx.lineTo(this.origin.x, this.origin.y); this.ctx.lineTo(this.vertexRight.x, this.vertexRight.y); this.ctx.stroke(); }, drawArrow:function(){ this.ctx.beginPath(); this.ctx.moveTo(this.vertexTop.x, this.vertexTop.y); this.ctx.lineTo(this.vertexTop.x-this.arrowWidth/2, this.vertexTop.y+this.arrowHeight); this.ctx.lineTo(this.vertexTop.x, this.vertexTop.y+this.arrowHeight/2); this.ctx.lineTo(this.vertexTop.x+this.arrowWidth/2, this.vertexTop.y+this.arrowHeight); this.ctx.closePath(); this.ctx.fill(); this.ctx.stroke(); this.ctx.beginPath(); this.ctx.moveTo(this.vertexRight.x, this.vertexRight.y); this.ctx.lineTo(this.vertexRight.x-this.arrowHeight, this.vertexRight.y-this.arrowWidth/2); this.ctx.lineTo(this.vertexRight.x-this.arrowHeight/2, this.vertexRight.y); this.ctx.lineTo(this.vertexRight.x-this.arrowHeight, this.vertexRight.y+this.arrowWidth/2); this.ctx.closePath(); this.ctx.fill(); this.ctx.stroke(); }, process:function(){ this.processData=[]; //在这一部分将画布认识的坐标转化为本坐标系的坐标 for (var i = 0; i < this.data.length; i+=2) { this.processData.push(this.origin.x+this.data[i]); this.processData.push(this.origin.y-this.data[i+1]); }; }, drawOrcle:function(){ this.ctx.beginPath(); for (var i = 0; i < this.processData.length; i+=2) { this.ctx.arc(this.processData[i],this.processData[i+1], 5, 0, Math.PI*2); this.ctx.fill(); }; }, drawLine:function(){ this.ctx.beginPath(); for (var i = 0; i < this.processData.length; i+=2) { this.ctx.lineTo(this.processData[i], this.processData[i+1]); }; this.ctx.stroke(); }, draw:function(){ this.drawZuobiao(); this.drawArrow(); this.drawOrcle(); this.drawLine(); } }; var linechat=new LineChart(cxt,[20,20,20,20],[10,10],[10,10,20,20,60,60,100,100]); linechat.draw(); </script>具体的详细步骤已经在代码里有所体现了,放到H5标准下的页面就好了!
1 0
- 利用canvas实现折线图的绘制
- 利用canvas绘制折线图的一种方法
- android中利用Canvas绘制折线图
- 利用 html5 canvas 简单绘制折线图
- html5 canvas 实现简单绘制折线图
- 用canvas绘制的折线图 +解析
- canvas实现折线图
- Canvas 实现表格内的折线图
- 利用canvas+Chart.js实现动态折线图
- android canvas绘制折线图和柱状图
- html5 canvas 实现折线图
- 折线图的绘制
- 利用DevExpress的WebChartControl绘制直方图,折线图和饼状图
- 利用HTML5的canvas标签实现灰太狼图像的绘制
- 利用Canvas绘制雷达图
- 原生js和canvas实现的 柱状图、饼状图、折线图
- 利用google绘图API 绘制折线图
- .NET : 如何利用GDI+绘制折线图
- 欢迎使用CSDN-markdown编辑器
- 将构造函数和非成员函数虚拟化
- svn中submit和upgrate 问题
- 爬虫、网页分析解析辅助工具 Xpath-helper
- 【NOIP模拟题】【暴力求解法】2016.11.17 第一题 素数密度 题解
- 利用canvas实现折线图的绘制
- android SQLite的使用
- C#设计模式之建造者模式(Builder Pattern)
- ios NSLog不打印设置
- html+css 个人小记
- Open CV学习记录(二十三)——相机校准和立体匹配
- js分割字符串
- Android 多线程编程
- 基于centos6.8的Suricata+Barnyard2的IDS前端Snorby