canvas及svg的基本使用-51学代码

01.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 black;
        }
    </style>
</head>

<body>
    <!-- canvas画布:是HTML5中新增的一个特性，双闭合标签 -->
    <!-- canvas标签默认宽度与高度 300 * 150 -->
    <!-- 浏览器认为canvas标签是一张图片 -->
    <!-- 给canvas画布添加文本内容没有任何意义 -->
    <!-- 给canvas标签添加子节点没有任何意义的 -->
    <!-- 你想操作canvas画布：画布当中绘制图形、显示一个文字，都必须通过JS完成 -->
    <!-- canvas标签的w|h务必通过canvas标签属性width|height设置 -->
    <!-- 切记不能通过样式去设置画布的宽度与高度 -->
    <canvas width="600" height="400"></canvas>
</body>

</html>
<script>
    //canvas标签任何操作务必通过JS完成
    //通过JS当中"笔"去完成
    let canvas = document.querySelector('canvas');
    //获取画布的笔【上下文】
    let ctx = canvas.getContext('2d');
    //绘制线段:绘制线段的起点的设置
    ctx.moveTo(100,100);
    //其他点的设置：可以有多个
    ctx.lineTo(100,200);
    ctx.lineTo(200,100);
    //设置图形的填充的颜色
    ctx.fillStyle = "red";
    ctx.fill();
    //设置线段的颜色与宽度
    ctx.strokeStyle = "purple";
    ctx.lineWidth="20"
    //可以设置起点与最终的结束点连接在一起
    ctx.closePath();
    //stroke方法绘制线段
    ctx.stroke();

</script>

02.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:0px;
            padding:0px
        }
        canvas{
            border:1px solid black;
        }
    </style>
</head>
<body>
     <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    //获取DOM节点
    let canvas = document.querySelector('canvas');
    //获取上下文
    let ctx = canvas.getContext('2d');
    //绘制矩形第一种方式:参数为x、y、w、h
    //这种的矩形没有办法设置填充颜色
    ctx.strokeRect(100,200,100,200);
    //第二种方式绘制矩形
    //填充颜色可以替换
    //绘制图形之前设置填充颜色
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    ctx.fillRect(300,200,100,200);
</script>

03.绘制圆形

<!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;
        }
    </style>
</head>
<body>
     <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
     //获取DOM
     let canvas = document.querySelector('canvas');
     //获取上下文
     let ctx = canvas.getContext('2d');
     //绘制圆形
     ctx.beginPath();
     //绘制圆形的方法：x、y,r,起始弧度、结束的弧度,是否逆时针绘制
     ctx.arc(100,100,50,0,2 * Math.PI,true);
     //设置填充颜色
     ctx.fillStyle = 'red';
     ctx.fill();
     //绘制圆形
     ctx.stroke();

     //绘制一个元
     ctx.beginPath();
     ctx.arc(200,200,50,0,1,true);
     ctx.stroke();
</script>

04.清除画布与绘制文字

<!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;
        }
    </style>
</head>
<body>
     <!-- 画布的宽度与高度通过属性设置，千万别通过样式去设置 -->
     <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
     //获取节点
     let canvas = document.querySelector('canvas');
     //获取上下文-笔
     let ctx = canvas.getContext('2d');
     //绘制矩形
     ctx.fillRect(100,200,100,200);
     //清除画布-整个画布被清除
    //ctx.clearRect(0,0,600,400);
    //清除部分画布
    ctx.clearRect(100,200,50,100);
    //设置文字大小
    ctx.font="20px 微软雅黑";
    ctx.fillStyle ='red';
    //绘制文字
    ctx.fillText("数据可视化",50,20);
</script>

05.绘制一个柱状图

<!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基本使用

<!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>
        <!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号 -->
        <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>
        <!-- 绘制圆形 -->
        <circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
        <!-- 绘制圆形|椭圆 -->
        <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" />
        <!-- 绘制任意图形 -->
        <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>

免责声明：

1.本站所提供的全部内容仅限于交流、学习与研究使用，请勿用于非法目的。

2.任何使用本站内容而出现的意外或损失，本站概不负责。

3.本站遵守国家法律法规，禁止制作、复制、发布、传播任何具有反动、色情、暴力、淫秽，政治等内容的信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理。

4.本站的留言、评论与转载内容，仅代表原作者个人观点，与本站观点或立场无关，所有评论、留言均需经过审核后方可正常显示，本站有权删除和过滤违反法律法规的或不正当的言论。

5.本站的文章部分内容可能来源于网络或转载于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。

6.本站可能会包含第三方网站的链接，点击后或将离开本站并进入其他站点，本站不对其他站点的内容负责。

7.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

8.根据《计算机软件保护条例》第十七条，为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬，本站所有软件资料仅用于学习研究。

9.本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

10.本站文章采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可，阅读后请勿用于非法用途。

点我去本站旗下导航网

更多知识，请关注微信公众号“51学代码”

文章版权声明 1.本网站名称：51学代码
2.本站永久网址：https://www.51xcode.com
3.本站的部分内容可能来源于网络或转载引用于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。
4.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5.本站一律禁止以任何方式发布或转载任何违法的相关信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理，访客发现请向站长举报。
6.如需转载文章请标明来源:51学代码 www.51xcode.com

THE END