遇到的问题：Retina屏上字体线条模糊问题

解决方案：放大canvas的大小，然后用css压缩回原大小，例如：想要900*400的画布，先将画布设置为 width="1800px" height="800px"，再用css {width: 900px;height: 400px;}压缩。

最终效果如下图：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>echarts绘制</title>

 </head>

 <body>

     <canvas id="canvas" width="1800px" height="800px" style="border: 1px solid #ebebed;width: 900px;height: 400px;"></canvas>

     <script>

         var scale = 2;

         var canvas = document.getElementById('canvas');

         var config = {

             width: canvas.width,

             height: canvas.height,

             Left: 70,

             Top: 90,

             Right: 30,

             Bottom: 60,

             color: ["#5266d7"],

             yLine:{

                 splitcount: 8,

                 data:[0,100,200,300,400,500,600,700,800]

             },

             xLine:{

                 splitcount: 9,

                 data:[1,2,3,4,5,6,7,8,9,10]

             },

             series:{

                 data:[0, 532, 555, 700, 500, 800, 300, 270, 358, 160, 453, 577, 639, 758, 233, 299, 120, 188, 158, 176, 333, 257, 120, 199, 573, 430, 111, 300, 700, 80, 50, 30, 40, 10, 22, 37, 77, 100, 240, 183, 143, 377, 133, 445, 345, 321, 111,12,3,34,456,235,214,43,21]

             }

         }

         var ctx = canvas.getContext('2d');

         // 绘制title

         drawText('单位: 次', config.Left, config.Top - 30, 'normal 22px Arial', '#a3a2a7');

         // 绘制网格线

         darwBackLine('#cccccc', config.yLine.splitcount, 1, config.yLine.data);

         // 绘制x轴

         drawXLine('#939099', config.xLine.splitcount, 2, config.xLine.data);

         // 绘制线条

         drawLines(config.color[0], 2,config.series.data);

         // 绘制图例

         drawItem('test', config.color[0], 2);

         function darwBackLine(color, splitcount, linewidth, data) {

             var len = Math.floor((config.height - config.Top - config.Bottom)/splitcount);

             var start = config.Top;

             for (var i = 0; i < splitcount; i++) {

                 var point = start+len*i;

                 drawLine(config.Left, point, (config.width/2 - config.Right)*scale, point, color, linewidth);

                 drawText(data[splitcount-i], 10, point, 'normal 22px Arial', '#605d68');

             }

             drawText(data[splitcount-i], 10, point+len, 'normal 22px Arial', '#605d68');

         }

         function drawXLine(color, splitcount, linewidth, data) {

             var left = config.Left;

             var top = config.height - config.Bottom;

             var right = (config.width/2 - config.Right)*scale;

             drawLine(config.Left, top, right, top, color, linewidth);

             var len = (right - left)/splitcount;

             for (var i = 0; i < splitcount+1; i++) {

                 var xpoint = left+len*i;

                 drawLine(xpoint,top+linewidth,xpoint, top-5*scale, color, linewidth);

                 var PanningLeft = data[i].toString().length*5;

                 drawText(data[i], xpoint-PanningLeft, top+15*scale, 'normal 22px Arial', '#605d68')

             }

         }

         function drawLines(color, linewidth, data) {

             var count = data.length;

             var left = config.Left;

             var top = config.height - config.Bottom;

             var right = (config.width/2 - config.Right)*scale;

             var len = (right - left)/(count - 1);

             var i = 0;

             var interval = setInterval(function() {

                 if(i >= count - 1){

                     clearInterval(interval);

                     return;

                 }

                 drawLine(left+len*i, top-(data[i]/800)*(top - config.Top), left+len*(i+1), top-(data[i+1]/800)*(top - config.Top), color, linewidth, 'bevel');

                 i++;

             }, 30);

         }

         function drawItem(text, color, linewidth) {

             var right = (config.width/2 - config.Right)*scale;

             var left = right-(text.length*10);

             drawText(text, left, config.Top - 10, 'normal 22px Arial', '#605d68');

             drawLine(left-20, config.Top - 15, left-80, config.Top - 15, color, linewidth);

         }

         function drawLine(startX, startY, endX, endY, color, width, lineJoin) {

             ctx.beginPath();

             ctx.moveTo(startX, startY);

             ctx.lineTo(endX, endY);

             if(color){

                 ctx.strokeStyle = color

             }

             if(width){

                 ctx.lineWidth = width*scale;

             }

             if(lineJoin){

                 ctx.lineJoin = lineJoin;

             }

             ctx.closePath();

             ctx.stroke();

         }

         function drawText(text, x, y, font, color) {

             ctx.font= font;

             ctx.fillStyle= color;

             ctx.fillText(text, x, y);

         }

     </script>

 </body>

 </html>

canvas绘制折线图(仿echarts)的更多相关文章

  1. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  3. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  4. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  5. canvas绘制折线图

    效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...

  6. 【带着canvas去流浪】（2）绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  7. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  8. 【Canvas】(2)---绘制折线图

    绘制折线图 之前在工作的时候,用过百度的ECharts绘制折线图,上手很简单,这里通过canvas绘制一个简单的折线图.这里将一整个绘制过程分为几个步骤: 1.绘制网格 2.绘制坐标系 3.绘制点 4 ...

  9. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

随机推荐

  1. Linux+db2+was部署问题总结

     Linux+db2+was部署问题总结 前段日子在住建部进行了Linux环境下,db2+rbp+was的部署,由于是集群,切涉及到了很多was的东西,搞了很长时间,在此做一个问题总结,供后续查询 ...

  2. java 内存分析之堆栈空间

    package Demo; public class Demo { public static void main(String[] args) { Demo demo = new Demo(); ; ...

  3. public 类、default 类、内部类、匿名内部类

    0.父类里private的成员变量,子类只有拥有权,没有使用权. 1.default 类 和public 类 package HelloWorld; public class HelloWorld { ...

  4. 转载：http://www.cnblogs.com/double-K/p/6926367.html

    sql专家感悟:不可说的感悟-——十年老技术转型(一) http://www.cnblogs.com/double-K/p/6926367.html

  5. 手动搭建 redis 集群

    转自http://meia.fun/article/1544161420745 手动搭建 redis 集群 redis 基本命令: 启动 redis 服务:redis-server xxx.conf ...

  6. Sun Solairs系统添加裸设备

    Sun Solaris系统添加裸设备对表空间进行扩容的大体操作步骤. 1.查看当前卷组信息 --查看当前卷组信息#vxdg list --查看当前卷组中物理磁盘的使用情况#vxdg free |gre ...

  7. 在 Azure VM 上安装 LEMP Web 服务器

    本文逐步讲解如何在 Azure 中的 Ubuntu VM 上部署 NGINX Web 服务器.MySQL 和 PHP(LEMP 堆栈). LEMP 堆栈可以替代常用的 LAMP 堆栈,可安装在 Azu ...

  8. Oracle EBS 获取用户挂的职责 请求 请求的类别(RTF还是什么的)

    select fu.user_ID, fu.user_name, fu.start_date, fu.END_DATE, fu.description, fe.last_name, fr.RESPON ...

  9. html端输入数据，利用qrcode.js生成打印二维码

    在前端页面中导入qrcode.js(下载)和jquery.js(下载) index.html <script> function print() { var textbox1 = $('i ...

  10. windows server 2016 无法联网问题

    首先,联网分解为两个问题,一.WLAN(无线网).二.以太网(有线网) 一 .WLAN问题解决方案 1.打开服务器管理器 2.添加角色和功能 3.一直点下一步到“功能”,勾选 DirectPlay 和 ...