后台管理系统13_后台管理系统宽高-CSDN博客

本文链接：https://blog.csdn.net/qq_45847016/article/details/123989302

文章目录

深度选择器
数据可视化

深度选择器

数据可视化

canvas绘制线段

首先介绍以下canvas
canvas是HTML5新增的特性，是一个双闭合标签
canvas标签默认的宽高为300px*150px
浏览器认为canvas画布是一个图片
给canvas画布添加文本没有效果，没有意义
给canvas标签添加子节点同样没效果，没意义
如果想操作canvas：绘制图形，显示文字，这些功能只能通过js完成
canvas的宽和高务必通过canvas标签书写width|height设置，不能通过样式设置
在这里插入图片描述
页面效果如下所示

canvas绘制矩形

在这里插入图片描述
x为距离左边界的距离，y为距离上边界的距离，w为宽度，h为高度，此时效果如下

在这里插入图片描述
此时页面效果如下所示

canvas绘制圆形

在这里插入图片描述

页面效果如下

canvas画布清除与绘制文字

清除画布
在这里插入图片描述
此时页面效果如下。明显将符合坐标的宽高进行清除。

绘制文字

页面效果如下所示

canvas绘制柱状图

绘制柱状图需要先选定好线段的长度、线段的位置、文字的位置、矩形的位置。具体代码如下所示。

<!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 red;
        }
    </style>
</head>
<body>
     <canvas width="800" height="420"></canvas>
</body>
</html>
<script>
     //获取节点
     let canvas = document.querySelector('canvas');
     //获取上下文
     let ctx = canvas.getContext('2d');
     //绘制文本--左上角的文本
     ctx.font="16px 微软雅黑";
     ctx.fillText('数据可视化',50,80);
     //绘制线段
     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',70,110);

     ctx.moveTo(100,160);
     ctx.lineTo(700,160);
     ctx.fillText('120',70,170);

     ctx.moveTo(100,220);
     ctx.lineTo(700,220);
     ctx.fillText('90',70,230);

     ctx.moveTo(100,280);
     ctx.lineTo(700,280);
     ctx.fillText('60',70,290);

     ctx.moveTo(100,340);
     ctx.lineTo(700,340);
     ctx.fillText('30',70,350);
     ctx.fillText('0',70,400);
     ctx.stroke();
     //绘制水平轴底部的线段
     ctx.moveTo(250,400);
     ctx.lineTo(250,410);
     //底部的文字
     ctx.fillText('食品',170,415);

     ctx.moveTo(400,400);
     ctx.lineTo(400,410);
     ctx.fillText('数码',310,415);
     ctx.moveTo(550,400);
     ctx.lineTo(550,410);
     ctx.fillText('服饰',450,415);
     ctx.fillText('箱包',600,415);
     ctx.stroke();

     //绘制矩形
     ctx.fillStyle = 'red';
     ctx.fillRect(120,200,100,200)
</script>

运行结果如下
在这里插入图片描述

svg的基本使用

svg也是双闭合标签。
svg可以通过样式设定宽度与高度。
浏览器认为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;
        }
    </style>
</head>

<body>
    <!-- svg双闭合标签：默认宽度与高度300 * 150  svg绘制图形务必在svg标签内部使用绘制图形 -->
    <svg class="box">
        <!-- x1 y1第一个点的坐标  x2 y2 第二个点的坐标 -->
        <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为填充透明度  stroke为线段颜色 -->
        <polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
        <!-- 绘制矩形 -->
        <!-- fill属性：设置填充颜色的  fill-opacity设置填充颜色的透明度  stroke：线的颜色 -->
        <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
        <!-- 绘制圆形 cx cy圆心点坐标 r半径 style样式 -->
        <circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
        <!-- 绘制圆形|椭圆  rx x轴半径  ry y轴半径-->
        <ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>
        <!-- 多边行 -->
        <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0" />
        <!-- 绘制任意图形  M 移动的初始位置  L画线 Z将结束和开始闭合-->
        <path fill-opacity="0" stroke="skyblue" d="
  M 10  10
  L 20 400
  L 30 120
  L 40 66
  L 50 99
  L 60 120
  L 70 99
  Z
"></path>
    </svg>
</body>

</html>