canvas和svg基本使用

已于 2022-05-16 21:56:36 修改
阅读量1k 收藏 6
点赞数 1
文章标签： mongodb 学习 node.js
于 2022-05-04 20:43:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/The_more_more/article/details/124577183
版权

canvas和svg基本使用

一、了解canvas和svg

canvas是HTML5提供的一种新标签，用于图形的绘制，通过JS来操作画面的绘制，<canvas>标签只是图形容器，必须使用脚本来绘制图形。

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。SVG 文件可以直接插入网页，成为DOM的一部分，然后用 JavaScript 和 CSS 进行操作。

二、（canvas）准备

在使用canvas之前创建文件，输入简单的HTML代码

<!DOCTYPE html>
<html lang="en">

<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;
        }

        canvas {
            border: 1px solid black;
            display: block; 
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
</body>

</html>

这里需要注意：canvas标签默认宽度与高度 300 * 150，在浏览器中审查元素会看到，而且是可以保存图片的，所以浏览器认为canvas标签是一张图片，我们在标签内部添加其他的文本内容也是无济于事的，添加子节点也是一样没有用的，需要我们使用JS代码去操作图形文字的绘制与展现，canvas的高度和宽度也必须通过自身自带的属性width|height设置。

三、绘制

1、线的绘制

在创建好基本代码的前提下，使用script书写JS代码

<script>
  // 获取节点
  let canvas = document.querySelector('canvas');
  // 创建2d画笔
  let ctx = canvas.getContext('2d');
  // 绘制线段的起点的设置
  ctx.moveTo(300, 200);
  // 其他点的设置：可以有多个
  ctx.lineTo(300, 300);
  ctx.lineTo(350, 250);
  //设置图形的填充的颜色
  ctx.fillStyle = "blue";
  ctx.fill();
  //设置线段的颜色与宽度
  ctx.strokeStyle = "red";
  ctx.lineWidth = "10"
  //可以设置起点连接终点
  ctx.closePath();
  // 绘制渲染线段
  ctx.stroke();
</script>

打开浏览器查看就看以看到一个三角形了

2、矩形的绘制

修改script的代码如下

<script>
    let canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');
    // 绘制矩形第一种方式
    // 第一个参数是画布左侧的距离，第二个是顶部的距离，第三个是宽，第四个是高
    // 这种方法无法替换颜色
    ctx.strokeRect(50,50,200,100);
    // 第二种方式绘制矩形，参数和上方一致
    // 这种方法可以替换填充颜色
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.fillRect(300,50,200,100);
</script>

打开浏览器就可以看见两个矩形了

3、圆形的绘制

修改script的代码

<script>
     let canvas = document.querySelector('canvas');
     let ctx = canvas.getContext('2d');
     // 绘制圆形
     ctx.beginPath();
     // 参数
	 // 第一个参数和第二个参数是圆形的坐标，第三个参数是圆的半径
	 // 第四个是起始的弧度，弧度不是角度，注意转换
	 // 第五个是结束的弧度，最后一个参数是是否逆时针绘制，true为顺时针
     ctx.arc(300,200,100,0,2 * Math.PI,true);
     // 设置填充颜色
     ctx.fillStyle = 'red';
     ctx.fill();
     // 绘制圆形
     ctx.stroke();
     // 绘制
     ctx.beginPath();
     ctx.stroke();
</script>

打开浏览器就可以看见圆形了

4、清除画布和绘制文字

清除画布也可以理解为裁剪一块区域，修改script的代码

<script>
    let canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');
    // 绘制一个矩形
    ctx.fillRect(200, 100, 200, 100);
    // 清除画布
    //ctx.clearRect(0,0,600,400);
    // 清除部分画布
    ctx.clearRect(200, 100, 50, 50);
    // 设置文字大小
    ctx.font = "20px 微软雅黑";
    ctx.fillStyle = 'blue';
    //绘制文字 参数为起始点的坐标
    ctx.fillText("文字区域", 100, 100);
</script>

这样就可以看见矩形的一个角被清除了，文字也展现出来了

5、制造一个简单的柱状图

示例代码如下

<!DOCTYPE html>
<html lang="en">

<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;
    }

    canvas {
      /* border: 3px solid black; */
      margin: 50px auto;
      display: block;
    }
  </style>
</head>

<body>
  <canvas width="800" height="430"></canvas>
</body>

</html>
<script>
  let canvas = document.querySelector('canvas')
  let ctx = canvas.getContext('2d')
  // 绘制文本
  ctx.font = '18px 微软雅黑'
  ctx.fillText('数据可视化', 50, 50)
  // 绘制线段
  ctx.moveTo(100, 100)
  ctx.lineTo(100, 400)
  ctx.lineTo(700, 400)
  ctx.stroke()
  // 绘制其他的线
  ctx.moveTo(100, 100)
  ctx.lineTo(700, 100)
  // 底部文字
  ctx.fillText('150', 60, 105)

  ctx.moveTo(100, 160)
  ctx.lineTo(700, 160)
  // 底部文字
  ctx.fillText('120', 60, 165)


  ctx.moveTo(100, 220)
  ctx.lineTo(700, 220)
  // 底部文字
  ctx.fillText('90', 65, 225)

  ctx.moveTo(100, 280)
  ctx.lineTo(700, 280)
  // 底部文字
  ctx.fillText('60', 65, 285)

  ctx.moveTo(100, 340)
  ctx.lineTo(700, 340)
  // 底部文字
  ctx.fillText('30', 65, 345)
  ctx.fillText('0', 70, 408)

  ctx.stroke()
  // 绘制水平轴底部的线段
  ctx.moveTo(250, 400)
  ctx.lineTo(250, 410)
  // 底部文字
  ctx.fillText('食品', 165, 420)

  ctx.moveTo(400, 400)
  ctx.lineTo(400, 410)
  // 底部文字
  ctx.fillText('数码', 315, 420)

  ctx.moveTo(550, 400)
  ctx.lineTo(550, 410)
  // 底部文字
  ctx.fillText('服饰', 460, 420)
  ctx.fillText('箱包', 620, 420)

  ctx.stroke()
  // 绘制矩形
  ctx.fillStyle = 'red'
  ctx.fillRect(130, 250, 100, 150)
  ctx.fillRect(280, 200, 100, 200)
  ctx.fillRect(430, 120, 100, 280)
  ctx.fillRect(580, 220, 100, 180)

</script>

四、svg

svg的学习代码如下

<!DOCTYPE html>
<html lang="en">

<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;
    }

    .box {
      width: 800px;
      height: 800px;
      border: 1px solid pink;
      margin: 100px auto;
      display: block;
    }
  </style>
</head>

<body>
  <!-- svg双闭合标签:默认宽度与高度300 * 150 svg绘制图形务必在svg标签内部使用绘制图形 -->
  <svg class="box">
    <!-- x1,y1是第一个点的坐标,x2,y2是第二个点的坐标   stroke-width="20"改变线的宽度-->
    <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
    <line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
    <!-- 绘制折线  fill-opacity="0.5" 设置填充颜色的透明度 stroke="red"设置描边-->
    <polyline points="300 300, 50 100, 120 400" fill-opacity="0.5" stroke="red"></polyline>
    <!-- 绘制矩形 fill="pink"改变填充的颜色-->
    <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
    <!-- 绘制圆形 -->
    <!-- stroke:pink 描边颜色  fill:red 填充颜色-->
    <circle cx="370" cy="95" r="50" style="stroke:pink;fill:red"></circle>
    <!-- 绘制圆形或椭圆 -->
    <!-- cx="500" cy="500" 圆心的位置 rx="100" ry="50" 水平半半径和垂直半径 -->
    <ellipse cx="500" cy="500" rx="100" ry="50" style="fill:red"></ellipse>
    <!-- 多边形 -->
    <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"></polygon>
    <!-- 绘制任意形状 -->
    <path d="
    M 10 10
    L 20 400
    L 30 120
    L 40 66
    L 50 99
    L 60 120
    L 70 200
    Z
    " stroke="red" fill-opacity="0"></path>
  </svg>
</body>

</html>

五、拓展Echarts

准备初始容器

<!DOCTYPE html>
<html lang="en">

<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>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 800px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid pink;
    }
  </style>
</head>

<body>
  <!-- 准备容器 -->
  <div></div>
</body>

</html>

这里我们需要链接引入Js文件，我们必须准备一个具有宽高的容器div

书写简单的script代码

<script>
  // 基于准备好的DOM初始化Echarts的实例
  let dom = document.querySelector('div')
  // 创建Echarts的实例
  let myEcharts = echarts.init(dom)
  // 指定图表的配置项与数据
  myEcharts.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })
</script>

等待加载就可以看到根据已有的数据展现可视化的柱状图了，加载不出来可以下载Echarts的js文件进行引入即可，Echarts的官网地址：<Apache ECharts>，在顶部的实例位置可以查看一些例子，使用只要找到我们所需要的样式，修改配置和数据使用即可，配置文件：<Documentation - Apache ECharts>

如果需要展示好几个只要对每一个容器div配置相应的配置项即可

<body>
  <!-- 准备容器 -->
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>
<script>
  // 基于准备好的DOM初始化Echarts的实例
  let dom1 = document.querySelector('.box1')
  let dom2 = document.querySelector('.box2')
  // 创建Echarts的实例
  let myEcharts = echarts.init(dom1)
  let myEcharts2 = echarts.init(dom2)
  // 指定图表的配置项与数据
  myEcharts.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })
  myEcharts2.setOption({
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
</script>

如果说一个div需要展示很多的图像，只需要在series选项增加配置对象即可

<body>
  <!-- 准备容器 -->
  <div class="box1"></div>
</body>

</html>
<script>
  // 基于准备好的DOM初始化Echarts的实例
  let dom1 = document.querySelector('.box1')
  // 创建Echarts的实例
  let myEcharts = echarts.init(dom1)
  // 指定图表的配置项与数据
  myEcharts.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
      {
        name: 'Access From',
        type: 'line',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        width: 300,
        height: 300,
        left: 10,
        top: 10
      }
    ]
  })
</script>

字符集的使用，将数据提取出来，使用字符集来展示数据

<body>
  <!-- 准备容器 -->
  <div class="box1"></div>
</body>
<script>
  let dom1 = document.querySelector('.box1')
  let myEcharts = echarts.init(dom1)
  // 指定图表的配置项与数据
  let data = [
    ['衣服', 120, 24, 'x', 30],
    ['游戏', 200, 26, 'y', 30],
    ['直播', 150, 21, 'z', 30],
    ['电影', 80, 233, 'p', 30]
  ]
  myEcharts.setOption({
    // 设置字符集
    dataset: {
      source: data
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        data: [120, 200, 150, 80],
      },
      {
        name: 'Access From',
        type: 'line',
        radius: '50%',
        encode: {
          y: 3
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        type: 'pie',
        radius: '50%',
        width: 300,
        height: 300,
        left: 10,
        top: 10,
        encode: {
          itemName: 3,
          value: 4
        }
      }
    ]
  })
</script>

了解双标坐系，在一个柱状图内部嵌入折线

<body>
  <!-- 准备容器 -->
  <div class="box1"></div>
</body>
<script>
  let dom1 = document.querySelector('.box1')
  let myEcharts = echarts.init(dom1)
  // 指定图表的配置项与数据
  // 双坐标轴
  myEcharts.setOption({
    title: {
      text: '双坐标系'
    },
    xAxis: {
      type: 'category',
      data: ['第一', '第二', '第三', '第四']
    },
    yAxis: [
      {
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        }
      },
      {
        axisLine: {
          show: true
        },
        axisTick: {
          show: true
        }
      }
    ],
    series: [
      {
        // 折线图
        type: 'line',
        data: [10, 20, 30, 50],
        yAxisIndex: 0
      },
      // 柱状图
      {
        type: 'bar',
        data: [6, 15, 30, 20],
        yAxisIndex: 1
      }
    ]
  })
</script>

对于Echarts的图形数据化主要在于使用配置手册来修改成我们需要的样子，将数据代入即可。

何嘉烟
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
09-28
到目前为止，SVG与Canvas的主要特性均已经总结完毕了,现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景,感兴趣的朋友可以了解下哦，或许对你有所帮助
HTML 5 Canvas vs. SVG
www.i201314.net
10-11 597
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。 SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
探索Canvas2SVG：一款强大的HTML5 canvas到SVG转换工具
最新发布
gitblog_00030的博客
04-14 413
探索Canvas2SVG：一款强大的HTML5 canvas到SVG转换工具 项目地址:https://gitcode.com/gliffy/canvas2svg Canvas2SVG 是一个开源JavaScript库，它为开发者提供了一个优雅的方式，将HTML5 Canvas的内容实时转换成可缩放矢量图形（SVG）元素。这个项目的目的是解决Web开发中的一大难题：如何捕捉和保存canvas绘制的...
svg 与canvas的不同
LuckXinXin的博客
10-09 379
svg与canvas的共同点： 都允许在浏览器中创建图形 SVG的定义： ● SVG 是一种使用 XML 描述 2D 图形的语言 ● SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 ● 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas定义： ●...
SVG和Canvas
10-06 267
Canvs和SVG都是前端绘图技术 ##SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开发标准。 SVG使用XML格式来定义图形。这意味着SVG DOM中的每个元素都是可用的. 所以可以为每个元素附加JavaScript事件处理器 在SVG中, 每个被绘制的图像均被视为对象. 如果SVG对象的属性发生变化, 那么浏览器能够自动重现图像 ##Canvas 一个...
Canvas 和 SVG 对比
Alan_1550587588的博客
05-07 3788
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。首先canvas是html5提供的新元素&lt;canvas&gt;，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。SVG：SVG...
canvas2svg：将HTML5 Canvas绘制命令转换为SVG
02-04
该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件格式转换为SVG...
canvas+svg实现标尺网格效果
04-11
使用js+canvas绘图，结合svg图形，实现标尺栏和网格效果。
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
使用unique-color方式识别Canvas中的鼠标单击事件（您可以参考以查看详细信息）SVG版本使用D3计算节点和链接位置使用Vue处理dom元素进入和离开使用Vue插槽让用户轻松使用自己的数据如何使用？SVG版本1.安装npm模块...
HTML5中Canvas与SVG的画图原理比较
09-28
canvas 与 SVG都能够使你在浏览器中画图，但它们的基本原理不同,接下来将对canvas 与 SVG的画图原理进行介绍，感兴趣的朋友可以了解下
详解FireFox下Canvas使用图像合成绘制SVG的Bug
01-21
本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。 最近产品上需要做一个这样的功能：给一些图形进行染色处理。想想这还不是顺手拈来的事情，早就研究过图形染色的...
最新版canvg.js，完美支持 svg 转 canvas
06-21
最新canvg.js，完美将svg转为canvas
canvas和svg
2197
08-08 354
1》&lt;canvas&gt;标签只有两个属性-width和height，当没有设置的时候width=300px，height=150px；也可以通过css来设置，但是当css的尺寸与初始画布的比例不一致时会出现扭曲（这时明确高度） 2》浏览器对HTML5标准支持不一样，所以通常在&lt;canvas&gt;内部会添加一些说明性HTML代码，如果浏览器支持canvas它将忽略，如果不支持他将显...
Canvas和SVG
qq_43539854的博客
08-15 954
Canvas和SVG
Canvas 与 SVG 的比较
weixin_61562639的博客
07-14 2624
在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。SVG基于XML，这意味着SVGDOM中的每个元素都是可用的。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。在SVG中，每个被绘制的图形均被视为对象。知道了svg和canvas是什么之后，我们就来比较一下canvas和svg。...
svg&canvas
little_flowers的博客
11-08 258
canvas 与 svg
写代码的女生酷不酷
03-31 343
canvas svg 相同点 差异 总结
canvas 和 SVG
05-25
Canvas 和 SVG 都是用于在 Web 页面中绘制图形的技术，但它们有着不同的工作原理和应用场景。 Canvas 是基于像素的绘图技术，它通过 JavaScript 操作像素来绘制图形。Canvas 可以绘制复杂的图形，如图像处理、动画...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值