遇到的问题：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. Week4——Hello.java分析

    如下图源码所示: 该段代码声明了一个entity实体类,该类有一个变量name,对该变量写了对应的get和set方法.类中还有一个空的构造方法hello(). @RequestScoped用于指定一个 ...

  2. zTree实现权限列表简单实例

    zTree的简单实例 zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAP ...

  3. 5.FileWriter 和 BufferWriter

    FileWriter 和 BufferWriter的使用场景  IO这块,各种Writer,Reader,让人眼晕 而在网上基本找不到在什么时候用哪个类,并且网上的IO demo 很多用法都是错的 在 ...

  4. 如何将同一 VNET 下的虚拟机从经典部署模型迁移到 Azure Resource Manager

    本文内容 适用场景 解决方案 适用场景 用户拥有多个云服务但是在同一个 VNET 下,希望将这些虚拟机从经典部署模型(以下简称:ASM)迁移到 Azure Resource Manager(以下简称: ...

  5. [翻译] CHTCollectionViewWaterfallLayout

    CHTCollectionViewWaterfallLayout https://github.com/chiahsien/CHTCollectionViewWaterfallLayout CHTCo ...

  6. 使用CADisplayLink写秒表

    使用CADisplayLink写秒表 效果: 源码: StopWatch.h 与 StopWatch.m // // StopWatch.h // ShowTime // // Created by ...

  7. Linux 系统调整内核参数

    调整系统内核参数 内核优化:Linux系统(内核 + shell + 应用程序)       针对业务服务应用而进行的系统内核参数调整(主要是/etc/sysctl.conf文件) 1. vim /e ...

  8. IIS6.0解析漏洞

    IIS6.0解析漏洞分两种 1.目录解析 以*.asp命名的文件夹里的文件都将会被当成ASP文件执行. 2.文件解析 *.asp;.jpg 像这种畸形文件名在“:”后面的直接被忽略,也就是说当成 *. ...

  9. 一段滚动文字的js (jQuery)

    function startmarqueeOneSMS() { var t; var to; var ishover = false; var waitone = 3000; var speed = ...

  10. 【教程】【FLEX】#005 拖动

    在Flex中,组件的拖动分为: 1. 加强型(即本身就可以拖动设置是否可以拖动的属 [dragEnabled ,dropEnabled ] 即可) 2. 非加强型(可以通过DragManager,Dr ...