canvas的线形基本用法+ 绘制折线图

最新推荐文章于 2024-02-21 07:15:00 发布
最新推荐文章于 2024-02-21 07:15:00 发布
阅读量1.3k 收藏
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amanda_wmy/article/details/81302462
版权

canvas的线形基本用法+ 绘制折线图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas</title>
  <style>
     canvas{
        border:1px solid #eee;
     }
  </style>
</head>
<body>
    <!-- 准备画布，要在canvas元素本身上设置大小 -->
    <canvas width="1000" height="1000">

    </canvas>
    <script>
        //  获取元素
         var mycanvas = document.querySelector('canvas') 
        // 获取上下文，绘制工具箱
         var ctx =mycanvas.getContext('2d');

        //绘制线条
        //移动画笔,设置起点,
        //默认宽度1px,默认颜色 黑色，但实际上有出入
        //原因：对齐的点事线的中心位置，会把线分成两个0.5px,显示的是会不饱和增加宽度
        //解决方法：前后移动0.5px
        ctx.beginPath();//开始新路径
        ctx.moveTo(100,100.5);
        //绘制轨迹，绘制路径
        ctx.lineTo(300,20);
        ctx.lineTo(300,100.5);
        ctx.strokeStyle="red";//描边的颜色(样式会覆盖)
        ctx.lineWidth =20; //描边的宽度
        ctx.lineCap = 'round'; //设置线两端样式
        ctx.lineJoin= 'round'
        //描轨迹，描边
        ctx.stroke();

        ctx.beginPath();//开始新路径
        ctx.moveTo(100,200.5);
        ctx.lineTo(200,120);
        ctx.lineTo(300,200.5);
        ctx.strokeStyle="blue";//描边的颜色
        ctx.lineWidth =10; //描边的宽度
        ctx.lineCap = 'square';
        ctx.lineJoin = 'bevel'
         //描轨迹，描边
        ctx.stroke();

        ctx.beginPath();//开始新路径
        ctx.moveTo(100,300.5);
        ctx.lineTo(300,300.5);
        ctx.strokeStyle="green";//描边的颜色(样式会覆盖)
        ctx.lineWidth =5; //描边的宽度
        ctx.lineCap = 'butt';
        ctx.lineJoin = ''
        //描轨迹，描边
        ctx.stroke();

        //绘制填充三角形
        ctx.moveTo(100,400);
        ctx.lineTo(200,400);
        ctx.lineTo(200,500)
        // ctx.lineTo(100,100);//起始点和linto的结束点无法完全闭合会缺角
        //所以要使用canvas的自动闭合
        ctx.closePath();
        ctx.stroke();
        //填充
        ctx.fillStyle ='pink'
        ctx.fill();

        //绘制镂空的正方形,逆时针转，
        //概念：非零填充（逆时针画正方形不填充，顺时针画正方形填充）
        ctx.beginPath();//开始新路径
        ctx.strokeStyle="red";//描边的颜色(样式会覆盖)
        ctx.moveTo(400,100);  
        ctx.lineTo(400,200);
        ctx.lineTo(500,200);
        ctx.lineTo(500,100);
        ctx.closePath();
        ctx.fill();
        ctx.fillStyle ='red'
        ctx.stroke();

        //设置虚线
        ctx.beginPath();//开始新路径
        ctx.moveTo(400,300.5);
        ctx.lineTo(600,300.5);
        ctx.strokeStyle="#aaa";//描边的颜色(样式会覆盖)
        //数组用来描述排列方式
        ctx.setLineDash([5,20,15]);
        //获取虚线的排列方式,获取的是不重复的那一段的排列方式
        console.log(ctx.getLineDash());
        //如果是正的值往后偏移，负值往前偏移
        ctx.lineDashOffset =20;
        ctx.stroke();


         //绘制一个从黑到白的渐变矩形
         //  获取元素
         var mycanvas = document.querySelector('canvas') 
        // 获取上下文，绘制工具箱
         var ctx =mycanvas.getContext('2d');
        // ctx.lineWidth =30;
        // for(var i=0;i<255;i++){
        //     ctx.beginPath();
        //     ctx.moveTo(100+i-1,100);
        //     ctx.lineTo(100+i,100);
        //     ctx.strokeStyle = 'rgb('+i+','+i+','+i+')';
        //     ctx.stroke();
        // }
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas-折线图</title>
  <style>
      canvas{
         border:1px solid #aaa;
      }
  </style>
</head>
<body>
    <canvas width='800' height='400'>

    </canvas>
    <script>
      //构造函数
      var LineChart = function(ctx){
          // 获取绘图工具
          this.ctx = ctx || document.querySelector('canvas').getContext('2d');
          //画布的大小
          this.canvasWidth = this.ctx.canvas.width;
          this.canvasHeight = this.ctx.canvas.height;
          //网格的大小
          this.gridSize = 10;
          //坐标系的间距
          this.space = 20;
          //坐标原点
          this.x0 = this.space;
          this.y0 = this.canvasHeight-this.space;
          //坐标系的箭头
          this.arrowSize = 10;
          //绘制点
          this.dottedSize = 6;
          //点的坐标和数据有关系，数据可视化
      }
      //行为方法
      LineChart.prototype.init =function(data) {
         this.drawGrid();
         this.drawAxis();
         this.drawDotted(data);
      };//初始化行为
      LineChart.prototype.drawGrid =function() {
         //x轴方向的线
         var xLineTotal = Math.floor(this.canvasHeight/this.gridSize)
         for(var i= 0;i<=xLineTotal;i++){
            this.ctx.beginPath();
            this.ctx.moveTo(0,i*this.gridSize-0.5)
            this.ctx.lineTo(this.canvasWidth,i*this.gridSize-0.5)
            this.ctx.strokeStyle ='red';
            this.ctx.stroke()
         }
         //y轴方向的线
         var yLineTotal = Math.floor(this.canvasWidth/this.gridSize);
         for(var i =0; i<=yLineTotal;i++){
            this.ctx.beginPath();
            this.ctx.moveTo(i*this.gridSize-0.5,0)
            this.ctx.lineTo(i*this.gridSize-0.5,this.canvasHeight);
            this.ctx.strokeStyle ='red';
            this.ctx.stroke()
         }
      }; //绘制网格
      LineChart.prototype.drawAxis =function() {
         //x轴
           this.ctx.beginPath();
           this.ctx.strokeStyle ='green';
           this.ctx.moveTo(this.x0,this.y0);
           this.ctx.lineTo(this.canvasWidth-this.space,this.y0)
           this.ctx.lineTo(this.canvasWidth-this.space-this.arrowSize,this.y0+this.arrowSize/2)
           this.ctx.lineTo(this.canvasWidth-this.space-this.arrowSize,this.y0-this.arrowSize/2)
           this.ctx.lineTo(this.canvasWidth-this.space,this.y0)
           this.ctx.fill();
           this.ctx.stroke();
         //y轴
         this.ctx.beginPath();
         this.ctx.strokeStyle ='green';
         this.ctx.moveTo(this.x0,this.y0)
         this.ctx.lineTo(this.x0,this.space)
         this.ctx.lineTo(this.space+this.arrowSize/2,this.space+this.arrowSize)
         this.ctx.lineTo(this.space-this.arrowSize/2,this.space+this.arrowSize)
         this.ctx.lineTo(this.space,this.space)
         this.ctx.fill()
         this.ctx.stroke()
      } ;//绘制坐标系
      LineChart.prototype.drawDotted =function(data) {
         //数据的坐标需要转换成canvas坐标，再进行点的绘制，在连线
         //x=原点的坐标+数据的坐标
         //y=原点的坐标-数据的坐标
         var that = this;
         //记录当前坐标
         var prevCanvasX = 0;
         var prevCanvasY = 0;
         data.map((item,i)=>{
             var canvasX = that.x0+item.x;
             var canvasY = that.y0-item.y;
            console.log(canvasX-that.dottedSize/2,canvasY-that.dottedSize/2)
            //绘制点
            that.ctx.beginPath();
            that.ctx.moveTo(canvasX-that.dottedSize/2,canvasY-that.dottedSize/2);
            that.ctx.lineTo(canvasX+that.dottedSize/2,canvasY-that.dottedSize/2);
            that.ctx.lineTo(canvasX+that.dottedSize/2,canvasY+that.dottedSize/2);
            that.ctx.lineTo(canvasX-that.dottedSize/2,canvasY+that.dottedSize/2);
            that.ctx.closePath();
            that.ctx.fill();
            //点的连线
            //当是第一点时，起点是x0,y0
            //当不是第一点时，起点是上一个点
            if(i==0){
              that.ctx.beginPath();
              that.ctx.moveTo(that.x0,that.y0)
              that.ctx.lineTo(canvasX,canvasY)
              that.ctx.stroke();
            }else{
               that.ctx.beginPath();
               that.ctx.moveTo(prevCanvasX,prevCanvasY) 
               that.ctx.lineTo(canvasX,canvasY)  
               that.ctx.stroke();
            }
            //每次记录最新的点
            prevCanvasX = canvasX;
            prevCanvasY = canvasY;
         })
      } ;//绘制所有的点
      //初始化,数据应该是从后端获取的
      var data = [
        {
          x:100,
          y:120
        },
        {
          x:200,
          y:160
        },
        {
          x:300,
          y:240
        },
        {
          x:400,
          y:320
        },
        {
          x:500,
          y:80
        },
      ];
      var LineChart=  new LineChart();
      LineChart.init(data);
    </script>
</body>
</html>
Amanda_wmy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现折线图（canvas详解）
kitty_ELF的博客
04-16 6900
这篇文章的起源就是之前用的都是ECharts突然有一天想自己用js手写一个折线图，所以我就从canvas开始学习了。 首先给大家看一下通过学习，我最后完成的折线图： 内容： x轴及平行刻度线 x轴、y轴坐标刻度 折点的数据显示 缺点： 线条样式的动态变换 y轴刻度算法 一点都不酷炫！！！ 一、Canvas介绍1、画布的创建2、设置画布的宽高和背景色3、设置渐变色3.1、线性渐变3.2、放射状/圆形渐变4、画布的变换4.1画布平移（translate）4.2、画布旋转（rotate）4.3 画布缩
Html5 canvas绘制折线、使用线性渐变、径向渐变和lineJoin，lineCap属性
啨天的博客
08-08 356
想了解更全面的canvas API可以点击右侧: canvas简介及常用API canvas使用透明度（globalAlpha） canvas使用线性渐变createLinearGradient canvas使用径向渐变createRadialGradient canvas使用lineJoin属性 canvas使用lineCap属性......
前端基础学习之h5-canvas入门1-直线绘制及绘制完整折线图
no pains,no gains
01-14 2166
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 （一）什么是Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制.
绘制带线性颜色变化填充的折线图
天花板的随笔
08-04 1962
最近在项目中遇到一个显示折线图的效果，但此效果与一般的折线图显示有几点特殊的要求：1、折线图里面，需要用特定的颜色填充，并且此颜色右上而下是渐变的；2、此折线图只需要均匀显示10个数据；3、在0，3，6，9这几个点上面，需要把改点代表的数字显示出来。效果图如下： 此效果的时候不多解释，肯定需要用到我们的自定义View，通过canvas来绘制曲线，绘制文字，绘制多边形并且用线性变化的颜色填充它，在底
开发案例：使用canvas实现图表系列之折线图
hdbdhdbh的博客
02-21 1148
以上是本次技术分析，希望能对大家有所启发，也祝愿各位开发者能开发出理想的效果，后续我们会把 chart 相关系列的组件封装到组件库发布到市场上，这样可以直接开箱即用了。敬请期待吧，后续还有很多技术的分享，不要错过！最后分享一份鸿蒙（HarmonyOS）开发学习指南。
11【canvas 1/2】canvas绘图+绘制平行线+三条不同颜色和宽度的平行线+一个填充的三角形+一个镂空正方形+绘制虚线+绘制一个从黑到白的渐变矩形+绘制点+矩形+网格+坐标系+折线图
南北极之间
04-30 1344
01-体验canvas绘图.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ ...
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
weixin_68908760的博客
12-19 1030
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
分享篇：Canvas绘制简单图像
qq_52799985的博客
09-15 395
绘制笑脸需要用到arc()，beginPath()，等方法,需要使用beginPath（）创建新的路径绘制每个圆时都会使用 stroke() 方法，默认情况下，绘制的路径会沿着之前的路径绘制，形成相互连接的效果，而这些圆之间是相互连接的。绘制折线需要的用到moveTo() lineTo() stroke()，折线的绘制和直线的绘制原理一致，使用moveTo()规定折线的起点，lineTo(),规定折线需要经过的位置，再使用stroke()绘制路径即可。同样，在此示例中，中心点的 y 坐标也设置为 100。
原生js，canvas实现柱状图，折线图，饼图
liuyongfang0211的博客
02-19 3067
效果图： &lt;!DOCTYPE&gt; &lt;html&gt;     &lt;head&gt;         &lt;title&gt;the title&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt;                       &lt;canvas id="bar" width=&qu
html svg 折线图原理,9款基于HTML5/SVG/Canvas的折线图表应用
weixin_39601641的博客
06-03 291
本文作者html5tricks，转载请注明出处利用1、华丽的HTML5图表 可展示实时数据HTML5在图表应用中也十分广泛，比起以前的网页图表，HTML5图表制作更便捷，功能更强大。这款HTML5图表插件外观十分华丽和专业，在数据展示方面也很有优势，图表不仅支持多维数据展示，而且支持区域选择数据功能，利用该HTML5图表可以更加方便地管理你的数据。2、HTML5折线图表Aristochart 图表...
用html5绘制折线图的实例代码
09-28
在本文中，我们将深入探讨如何使用HTML5的Canvas API来绘制折线图。HTML5的Canvas元素是一个强大的工具，允许开发者在网页上进行动态图形绘制。以下是一个使用HTML5绘制折线图的实例代码，我们将逐步解析每个部分，...
html5使用Canvas绘图的使用方法
09-28
2. 图表制作：Canvas适合创建动态图表，如折线图、柱状图、饼图等，用于数据可视化。 3. 字体设计：自定义字体渲染可以通过Canvas实现，提供个性化的文本样式。 4. 图形编辑器：全Web实现的图形编辑工具，如在线画板...
js HTML5 Canvas线性图表插件可以绘制不同的颜色.zip
11-01
在"js HTML5 Canvas线性图表插件可以绘制不同的颜色.zip"这个压缩包中，我们很可能是得到了一个JavaScript插件，专门用于在Canvas上绘制具有不同颜色的线性图表。 线性图表是一种常见的数据可视化形式，它用直线或...
Canvas彩色发光3D线条动画特效
07-24
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上直接用JavaScript进行2D和3D图形绘制。在这个“Canvas彩色发光3D线条动画特效”中，我们将深入探讨如何利用Canvas API来创建复杂的视觉效果。 首先，...
Canvas 10+示例.rar
05-27
9. **数据可视化**："canvas数据可视化.html"则可能展示如何利用Canvas将数据转换为图表，如柱状图、折线图等，这对于数据分析和信息展示非常有用。 10. **碰撞检测**："jscanvas两个矩形碰撞.html"可能涵盖了如何...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
pyqt5 + matplotlib绘制折线图
05-20
如果你想在 PyQt5 中绘制折线图（line chart），可以使用 Matplotlib 库。下面是一个简单的示例代码： ```python import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QSizePolicy, QVBoxLayout, QWidget from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas from matplotlib.figure import Figure class MainWindow(QMainWindow): def __init__(self): super().__init__() # 创建 Matplotlib 图形 self.figure = Figure(figsize=(5, 4), dpi=100) self.canvas = FigureCanvas(self.figure) self.canvas.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding) # 创建一个垂直布局，并将 Matplotlib 图形添加到其中 layout = QVBoxLayout() layout.addWidget(self.canvas) # 创建一个 QWidget，用于放置布局 widget = QWidget() widget.setLayout(layout) self.setCentralWidget(widget) # 绘制折线图 self.plot() def plot(self): # 获取 Matplotlib 的 Axes 对象 ax = self.figure.add_subplot(111) # 准备数据 x = [1, 2, 3, 4, 5] y = [2, 4, 6, 8, 10] # 绘制折线图 ax.plot(x, y) # 添加标题和坐标轴标签 ax.set_title("Line Chart") ax.set_xlabel("X-axis") ax.set_ylabel("Y-axis") # 更新 Matplotlib 图形 self.canvas.draw() if __name__ == "__main__": app = QApplication(sys.argv) mainWindow = MainWindow() mainWindow.show() sys.exit(app.exec_()) ``` 在这个示例中，我们首先创建了一个 Matplotlib 图形，并将其添加到一个垂直布局中。然后，我们定义了一个 `plot` 方法，用于绘制折线图。在 `plot` 方法中，我们获取了 Matplotlib 的 Axes 对象，并使用 `plot` 函数绘制了折线图。最后，我们添加了标题和坐标轴标签，并更新了 Matplotlib 图形。 在 `__main__` 方法中，我们创建了一个 QApplication 对象，并将其传递给我们的 MainWindow 类。然后，我们显示了窗口并启动了应用程序的事件循环。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值