遇到的问题：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. ios虚拟机安装（一）

    安装软件:vmwarestation-v9.0.1()   MAC OS X Mountain Lion 10.8.2 xcode 4.6.2 一定要安装补丁:unlock-all-v110(mac系 ...

  2. this and super

    this 和 super 的区别:this, 先从本类找属性和方法,本类找不到再从父类找.super, 从父类找. this 和 super 都可以调用构造方法,所以this() 和 super() ...

  3. Django 添加自定义包路径

    在设置文件里: import sys sys.path.insert(0,os.path.join(BASE_DIR,"要导包的目录名")) 用pycharm时,如果导包后没有自动 ...

  4. Week5——Ajax

    1.简介 AJAX 相当于异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网 ...

  5. 3.HTML颜色

    一,HTML 颜色采用的是 RGB 颜色,是通过对红(R).绿(G).蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红.绿.蓝三个通道的颜色. <p st ...

  6. PHP生成随机或者唯一字符串

    本文出至:新太潮流网络博客 /** * [生成随机字符串] * @E-mial wuliqiang_aa@163.com * @TIME 2017-04-07 * @WEB http://blog.i ...

  7. Hive的介绍及安装

    简介 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件 映射为一张数据库表,并提供类 SQL 查询功能. 本质是将 SQL 转换为 MapReduce 程序. Hive组件 ...

  8. Jmeter入门--可执行元件

    一.测试片段(Test Fragment) 测试片段元素是控制器上的一种特殊的线程组,它在测试树上与线程组处于一级层级.它与线程组有所不同,因为它不执行,除非它是一个模块控制器或者是被控制器所引用时才 ...

  9. 转：oracle 事务

    原文地址:http://blog.csdn.net/junmail/article/details/5556561 关于Oracle事务的总结 1.什么是事务,事务的特性是什么? 事务的任务便是使数据 ...

  10. 使用UICollectionView

    使用UICollectionView 使用UICollectionView的流程: 1. 设定一个UICollectionViewFlowLayout 2. 使用这个设定的UICollectionVi ...