可视化系列讲解：canvas的基本使用

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

文章目录

一、什么是Canvas？

Canvas 最初由Apple于2004 年引入，用于Mac OS X WebKit组件，为仪表板小部件和Safari浏览器等应用程序提供支持。
后来，它被Gecko内核的浏览器（尤其是Mozilla Firefox），Opera和Chrome实现，并被网页超文本应用技术工作小组提议
为下一代的网络技术的标准元素（HTML5新增元素）。
Canvas提供了非常多的JavaScript绘图API（比如：绘制路径、矩形、圆、文本和图像等方法），与元素可以绘制
各种2D图形。

二、Canvas优缺点

1.优点

1.1 Canvas提供的功能更原始，适合像素处理，动态渲染和数据量大的绘制，如：图片编辑、热力图、炫光尾迹特效等。
1.2 Canvas非常适合图像密集型的游戏开发，适合频繁重绘许多的对象。
1.3 Canvas能够以 .png 或 .jpg 格式保存结果图像，适合对图片进行像素级的处理。

2.缺点

2.1 在移动端可以能会因为Canvas数量多，而导致内存占用超出了手机的承受能力，导致浏览器崩溃。
2.2 Canvas 绘图只能通过JavaScript脚本操作（all in js）。
2.3 Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化，导致模糊。

3.检查浏览器是否支持Canvas。

测试 canvas.getContext() 方法的存在

三、坐标系

在这里插入图片描述

默认的坐标原点在元素左上角，当然，如我们上一节所讲 你可以通过形变，改变坐标原点

四、绘制矩形

1.Canvas支持两种方式来绘制矩形：矩形方法 和 路径方法。

1.1 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
1.2 除了矩形，其他的图形都是通过一条或者多条路径组合而成的。
1.3 通常我们会通过众多的路径来绘制复杂的图形。

2.Canvas 绘图的矩形方法：

2.1 fillRect(x, y, width, height)： 绘制一个填充的矩形。
2.2 strokeRect(x, y, width, height)： 绘制一个矩形的边框。
2.3 clearRect(x, y, width, height)： 清除指定矩形区域，让清除部分完全透明。
2.4 x 与 y 指定了在canvas画布上所绘制矩形的左上角（相对于原点）的坐标（不支持 undefined ）。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      console.log('%O', canvasEl);

      
      if (!canvasEl.getContext) return
      // 获取cancas渲染上下文
      let ctx = canvasEl.getContext('2d') // 2d /webgl
      console.log(ctx);

      // 在原点绘制一个填充的宽100px搞50px的矩形
      ctx.fillStyle = 'green'; // 不设置颜色时 默认为填充黑色（如果需要设置颜色，必须写在绘制元素的前面）
      ctx.fillRect(0, 0, 100, 50)
      // 绘制描边的矩形
      // ctx.strokeStyle = 'green';
      ctx.strokeRect(100, 100, 100, 50)

      // 清除指定区域的矩形
      // ctx.clearRect(0, 0, 50, 25)
    }
  </script>
</body>
</html>

五、认识路径

1. 什么是路径？

1.1 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
1.2 路径是可由很多子路径构成，这些子路径都是在一个列表中，列表中所有子路径（线、弧形等）将构成图形。
1.3 一个路径，甚至一个子路径，通常都是闭合的。

2. 如何用路径绘制图形？

2.1 首先需要创建路径起始点（beginPath）。
2.2 然后使用画图命令去画出路径( arc 、lineTo )。
2.3 之后把路径闭合( closePath , 不是必须)。
2.4 一旦路径生成，就能通过描边(stroke)或填充路径区域(fill)来渲染图形。

3.所需函数

3.1 beginPath()：新建一条路径，生成之后，图形绘制命令被指向到新的路径上绘图，不会关联到旧的路径。
3.2 closePath()：闭合路径之后图形绘制命令又重新指向到 beginPath之前的上下文中。
3.3 stroke()：通过线条来绘制图形轮廓/描边（针对当前路径图形）。
3.4 fill()：通过填充路径的内容区域生成实心的图形（针对当前路径图形）。

六、路径-绘制直线

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      // 0. 设置线条的属性(不设置 就会用默认的)
      // ctx.lineWitdh = 10
      // ctx.strokeStyle = 'green';
      // 1. 创建路径起点
      ctx.beginPath()
      // 2. 移动画笔(确定从哪里开始画)
      ctx.moveTo(0,10)
      //  绘制一条从当前位置到指定 (x ，y)位置的直线
      ctx.lineTo(100, 10)
      // 闭合路径（不是必须写，但建议写）
      ctx.closePath()
      // 描边（绘制线条只能用stroke不能用fill）
      ctx.stroke()
    }
  </script>
</body>
</html>

七、路径-绘制三角形

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      // 描边三角形
      ctx.beginPath()
      ctx.moveTo(50,0)
      ctx.lineTo(100, 50)
      ctx.lineTo(50, 100)
      // ctx.closePath()
      ctx.stroke()

      // 实心三角形
      ctx.beginPath()
      ctx.moveTo(150,0)
      ctx.lineTo(200, 50)
      ctx.lineTo(150, 100)
      // ctx.closePath()
      ctx.fill() //他会自动闭合路径
    }
  </script>
</body>
</html>

八、路径-绘制圆弧，圆

1. 绘制圆弧或者圆，使用arc()方法

1.1 arc(x, y, radius, startAngle, endAngle, anticlockwise)，该方法有六个参数：
◼ x、y：为绘制圆弧所在圆上的圆心坐标。
◼ radius：为圆弧半径。
◼ startAngle、endAngle：该参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。
◼ anticlockwise：为一个布尔值。为 true ，是逆时针方向，为false，是顺时针方向，默认为false。

2. 弧度计算

◼ arc() 函数中表示角的单位是弧度，不是角度。
◼ 角度与弧度的 JS 表达式：弧度=( Math.PI / 180 ) * 角度 ，即 1角度= Math.PI / 180 个弧度
比如：旋转90°：Math.PI / 2； 旋转180°：Math.PI ； 旋转360°：Math.PI * 2； 旋转-90°：-Math.PI / 2；

3.案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      
      // 圆
      ctx.beginPath()
      ctx.arc(50, 50, 25, 0, Math.PI * 2, false)
      // ctx.closePath()
      ctx.stroke()

      // 填充圆
      ctx.beginPath()
      ctx.arc(150, 50, 25, 0, Math.PI * 2, false)
      // ctx.closePath()
      ctx.fill()

      // 圆弧
      ctx.beginPath()
      ctx.arc(150, 150, 25, 0, Math.PI, false)
      // ctx.closePath()
      ctx.stroke()
    }
  </script>
</body>
</html>

九、路径-绘制矩形

和上面的绘制矩形差不多，就不加图片了

<!DOCTYPE html>
<html lang="zh-CH">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
      margin: auto;
      background-image: url(../images/grid.png);
    }
    canvas {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  
  <!-- 如果不给宽高 默认宽300px 高150px -->
  <canvas id="box" width="300" height="300">
    您的浏览器不兼容Canvas，请升级浏览器
  </canvas>

  <script>
    window.onload = function() {
      const canvasEl = document.getElementById('box')
      if (!canvasEl.getContext) return
      let ctx = canvasEl.getContext('2d')
      
      ctx.beginPath()
      // ctx.moveTo(0,0)
      ctx.rect(10, 10, 100, 50)
      // ctx.closePath()
      // ctx.stroke()
      ctx.fill()
    }
  </script>
</body>
</html>
你的微笑、暖暖的
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts：Apache ECharts是用于浏览器的功能强大的交互式图表和数据可视化库
02-05
Apache ECharts Apache ECharts是一个免费的，功能强大的图表和可视化库，它提供了一种简单的方法来向您的商业产品中添加直观，交互式和高度可定制的图表。 它使用纯JavaScript编写，并基于 ，这是一个全新的轻量级画布库。 | 获取Apache ECharts 您可以选择以下方法之一： 从官方网站 从官方网站下载 npm install echarts --save CDN： 文件 讲解 API 选件手册 得到帮助 漏洞报告和功能请求的 电子邮件提出一般问题 订阅以更新项目 建立 构建echarts源代码： 执行echarts的根目录中的指示信息：（需要
可视化系列讲解：canvas的动画实现
wangyuiba1314的博客
01-02 6271
前端可视化系列讲解：css3D，svg，canvas等
微信小程序（数据可视化、Canvas、绘制线段、图形、太极图、文本、图像、渐变、变形）
weixin_48764743的博客
12-08 4044
一、数据可视化 1数据可视化概述 数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。 2应用场景 数据报表 特效制作 游戏开发 大屏展示 大屏展示目前在web前端开发中占比比较多，使用场景如下： (1)媒体大屏 适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口； (2)接待大屏 适用企业内部宣传专区，用于接待来访领导、客户或投资。 (3)监控大屏 针对企业运营或运维监控需求
前端canvas项目实战——在线图文编辑器(七)：加粗、斜体、下划线、删除线（下）
石沉溪洞
03-20 792
上一篇博文中，我们实现了为文字添加和修改加粗、斜体、下划线、删除线。 这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第七篇——加粗、斜体、下划线、删除线（下），主要的内容有： 1. 在上一篇实现加粗、斜体、下划线和删除线等功能时遇到bug及其解决方案。 2. 在上一篇的实现中，我们发现了可以对数据进行优化的地方，降低数据存储和前后端传输的数据大小，减少浪费。
tui.chart：:bread::bar_chart:用于数据可视化的漂亮图表
02-05
:bread: :chart_increasing: 将数据分散在TOAST UI图表上。 TOAST UI Chart是Beautiful Statistics Data Visualization库。 :package: 配套 当使用Plain JavaScript，React，Vue组件时，TOAST UI Chart的功能可用。 由NHN实现JavaScript组件。 由NHN实现的Vue包装器组件。 由NHN实现的React包装器组件。 :orange_book: 文件资料 讲解 v4.0迁移指南 :smiling_face_with_heart-eyes: 为什么选择TOAST UI Chart？ 简单，易用，美观！ TOAST UI Chart使您的数据弹出并以易于理解的方式呈现。 此外，它提供了广泛的主
keshihua:可视化学习
04-19
靳小健的可视化学习 04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？ 03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？ 02 | 指令式绘图系统：如何用Canvas绘制层次关系图？ 01 | 浏览器中实现可视化的四种方式 路线 要点 图形基础：带你熟悉HTML/CSS、SVG、Canvas2D和WebGL这四种图形系统，学会它们的基本用法、优点和局限性，从而能在实际应用中选择合适的图形系统，以达到最好的视觉效果。 数学基础：深入讲解向量、矩阵运算、参数方程、三角剖分以及仿射变换等内容，并配合综合运用，帮你建立一套通用的数学知识体系，适用于所有图形系统，以此来解决可视化图形呈现中的大部分问题。 视觉呈现：和你讨论像素化、动画、3D和交互等话题，结合美颜、图片处理和视觉特效等实际例子，来应用各种数学和图形学知识，帮你全面提升视觉呈现的能力，实现更高级的视觉效果。
【数据可视化】数据可视化Canvas
DomCode
06-09 1466
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
vue canvas 画布编辑器
qq_35065659的博客
09-16 735
vue画布
canvas简易使用教程
BUG_CONQUEROR_LI的博客
09-19 6464
canvas绘制矢量图: 是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。提供了一个通过和的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及实时视频处理等方面。
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 7931
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
canvas图形编辑器
嘿嘿
01-31 2047
原文地址：canvas图形编辑器 使用canvas进行开发项目，我们离不开各种线段，曲线，图形，但每次都必须用代码一步一步去实现，显得非常麻烦。有没有一种类似于PS，CAD之类的可视化工具，绘制出基本的图形，然后输出代码。之后我们就可以在这个生成的图形场景的基础上去实现功能，那将是多么的美妙的事啊。话不多说，我们来实现一个图形编辑器吧????。 主要实现如下的功能： 直线(实线、虚线) 贝塞尔曲线...
CanvasStudy:HTML5 Canvas的中文系列学习教程，也可作为查阅工具，简单上手
05-11
CanvasStudy 关于Canvas（About Canvas）    Canvas API 提供了一个通过JavaScript和HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。   Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。   Canvas可操作的层面是像素级别的，你觉得还有什么它做不到吗？ 介绍（Introduce）   本教程是一套详细介绍Canvas的系列学习教程同时也是查阅工具，以实例为主，采用由泛到精的学习结构，所有的小节都有单独的教程页面和HTML文件。 如果你想直接开始学习，请直接下拉到。 注意：该教程并未完结，以下是正式版的README说明。 现在，所有教程的讲解均在CSDN博客里书写，以Github Page
canvas可视化波形音频播放器(原创)
03-07
一个 canvas 可视化波形音频播放器。
canvas自定义编辑器
06-15
canvas自定义编辑器
element-ui的bug记录
nick_zhang的博客
04-29 328
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 793
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 691
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 544
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
vue3 canvas 可视化编辑器
10-27
综上所述，Vue3 canvas可视化编辑器是一个功能丰富、易于使用的前端开发工具，方便用户创建和编辑基于HTML5 Canvas的可视化界面，并能够实时预览和编辑。它具有直观的界面、强大的编辑功能和高效的性能，能够满足...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值