遇到的问题：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. Android网络请求库RetrofitUtils

    RetrofitUtils GitHub地址,帮忙给个Star 项目介绍 Retrofit+Okhttp辅助类的简单封装,vesion 1.0.X 实现了Get,Post-Form.Post-Json ...

  2. MQTT介绍（3）java模拟MQTT的发布，订阅

    MQTT目录: MQTT简单介绍 window安装MQTT服务器和client java模拟MQTT的发布,订阅 在此强调一下mqtt的使用场景: 1.不可靠.网络带宽小的网络 2.运行的设备CPU. ...

  3. 【日常记录】用 vs2015 编译 love2d 引擎时出现 依赖项目luajit编译失败的解决办法

    如图片所示,提示是没有找到cmake命令.看来是需要camke软件支持的,由于当初安装CMake后我重装了系统,也没有把cmake的bin路径 解决办法一:重新安装CMake,并勾选上"ad ...

  4. ansible 一键部署

    start install: rpm   -Uvh   https://mirrors.aliyun.com/epel/epel-release-latest-7.noarch.rpm yum  in ...

  5. Oracle EBS 键弹性域 段限定词取值

    中间是回车符 对应编码时 Chr(10) substr(replace(t.compiled_value_attributes, Chr(10), ''), 3, 1)

  6. 纲举目张：打通MySQL架构和业务的任督二脉

    目前,在很多OLTP场景中,MySQL数据库都有着广泛的应用,也有很多不同的使用方式.从数据库的业务需求.架构设计.运营维护.再到扩容迁移,不同的MySQL架构有不同的特点,适应一定的业务场景,或者解 ...

  7. 设计可以多选的按钮ChooseManyButton

    设计可以多选的按钮ChooseManyButton 效果: 源码: ChooseManyButton.h 与 ChooseManyButton.m // // ChooseManyButton.h / ...

  8. (z转)基于CPU的Bank BRDF经验模型，实现各向异性光照效果！

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文 名“GPU编程与CG语言之阳春白雪下里巴人” BRDF 光照模型 10.2.1 什么 ...

  9. docker及服务器遇到的坑

    目录 DNS不可用 修改docker查找源 容器保持固定ip 查看docker连接 容器间通信 容器拷贝数据 php连接docker mysql 8.0出错authentication method ...

  10. C#(.NET)面试题：做一个能自定义输入命令的表格程序

    目前为止,已经面试  5  10 家了... 这个试题面试的公司是某一上市公司. 试题是英文的(后面给出翻译): you're given a task of writing a simple pro ...