遇到的问题：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. ecloipse背景修改豆沙

    Eclipse背景色的修改 Eclipse背景色的修改,修改为豆沙色  值是85 123 205 一．修改编辑区   ①这个比较简单一般都会不多说. 1.首先点击Window 然后选择Preferen ...

  2. CSS 引入方式 选择器

    ---恢复内容开始--- CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 步骤: A.找到标签 B.操作标签 ...

  3. python中的字符串编码问题——1.理解编码和解码问题

    理解编码与解码(python2.7):1)编码 是根据一个想要的编码名称,把一个字符串翻译为其原始字节形式.>>> u_str=u'字符串编码aabbbcccddd'>> ...

  4. webpack-易混淆部分的解释

    原文链接: https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9 webpack的核心哲学 1. 任何皆模块 正 ...

  5. 使用SharpZipLib压缩与解压文件

    using ICSharpCode.SharpZipLib.Zip; using System; using System.Collections.Generic; using System.IO; ...

  6. C++发展概述、优缺点及应用领域

    个人观点(C++虽功能强大,但是底层还是调用C,C++为了吸引更多的C程序员,功能过于丰富且复杂,一定程度上反而降低了可编程的实用性.但是不可否认C++ 也是一门艺术.) C++是一门以C为基础发展而 ...

  7. Mysql 安装服务无法启动解决方案与使用的一般使用指令

    问题描述: 在安装mysql 时,如果第一次没安装成功,第二次重装可能出现莫名奇妙的情况.通过一番尝试,发现,安装往上的教程还是无法成功安装的主要原因是第一次安装虽然未成功,但是mysql 默认的33 ...

  8. Hibernate学习笔记一之注解

    1.@Entiy  实体类注解 2.@Table  映射表 (name=“”)表名 3.@Coulmn @Column( name="columnName";            ...

  9. java quartz 中的时间格式

    SimpleTrigger 如果需要计划一个任务在指定的时间执行,或者在指定的时间后以指定的间隔连续执行多次,比如希望在2005年1月12号上午11:22:54开始执行一个任务,在这之后每隔20分钟执 ...

  10. swift的Hashable

    Conforming to the Hashable Protocol To use your own custom type in a set or as the key type of a dic ...