前端小白的学习之路(HTML5 二)

提示：<svg>与<canvas>

一、svg标签

1.简介

   SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用于描述二维图形和动画的 XML 标记语言。它支持基本形状、路径、文本、图像、渐变、滤镜等元素，可以创建丰富多彩、高度可定制的图形和动画效果，特点是可以无限缩放而不失真。

2.常用属性

width 和 height：用于指定SVG图形的宽度和高度。您可以使用像素(px)、百分比(%)等单位。<svg width="200" height="100">
viewBox：用于指定SVG图形的视口框。视口框定义了用户坐标系的范围，并且可以通过它来实现图形的缩放和移动。<svg viewBox="0 0 200 100">
xmlns：用于指定XML命名空间。对于SVG，通常是指定为"http://www.w3.org/2000/svg"。```<svg xmlns="http://www.w3.org/2000/svg">```
fill：用于指定SVG图形的填充颜色。<svg fill="red">
stroke 和 stroke-width：分别用于指定SVG图形的边框颜色和宽度。<svg stroke="black" stroke-width="2">
class 和 id：用于为SVG图形指定类名和唯一标识符ID，以便通过CSS或JavaScript进行样式和操作控制。<svg class="my-svg" id="svg1">
preserveAspectRatio：用于指定如何适应SVG图形的视口框和容器大小之间的比例关系。<svg preserveAspectRatio="xMinYMin meet">

3.<path>标签

<path>

标签用于在 SVG 中定义一个路径。路径可以是直线、曲线、圆弧、贝塞尔曲线等，通过指定路径数据来描述形状。

<path>

标签的主要属性是

，它用于定义路径的数据。路径数据是一系列的命令和参数，指示了如何绘制路径的形状和轮廓。路径数据中的命令包括移动到（M）、直线到（L）、水平线到（H）、垂直线到（V）、曲线到（C、S、Q、T）、弧线到（A）等。

示例：

<!--使用<path>做一个三角形-->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 10 L 90 10 L 50 90 Z" fill="none" stroke="black" />
</svg>

4.使用示例

<!DOCTYPE html>
<html lang="zh-cn">

<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>基本模板</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>

<body>
    <!-- 矢量图: 一种缩放不容易失真的图片 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" fill="green" class="bi bi-1-circle"
        viewBox="0 0 16 16">
        <path
            d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z" />
    </svg>

    <!-- xmlns="http://www.w3.org/2000/svg"：指定 SVG 命名空间。
        width="100px" height="100px"：指定 SVG 图形的宽度和高度为 100 像素。
        fill="green"：指定图形的填充颜色为绿色。
        class="bi bi-1-circle"：指定图形的 CSS 类名，用于样式控制。
        viewBox="0 0 16 16"：指定 SVG 图形的视口框，用于定义用户坐标系的范围。
        <path> 元素：
        
        d 属性：定义了 SVG 路径数据，描述了要绘制的路径的形状和轮廓。路径数据使用 SVG 路径命令来描述，如 M、A、L 等。在这个例子中，路径数据描述了一个圆形的轮廓和一个中空的圆环。
        M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z：描述了一个圆形轮廓，圆心在坐标 (1, 8)，半径为 7。
        m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0Z：描述了一个中空的圆环，圆心在坐标 (15, 0)，半径为 8。
        M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z：描述了圆环内部的一些装饰效果。 -->
</body>

</html>

二、canvas标签

1.简介

canvas 是画布标签，需要结合JS才能使用。应用场景： 1. 展示广告2. 数据统计（柱状图、折线图、饼状图） 3. JS小游戏。

2.常用属性与方法

属性：- width：画布的宽度。- height：画布的高度。
获取上下文对象的方法：- getContext('2d')：获取绘图上下文对象，用于绘制2D图形。
绘制图形：- fillRect(x, y, width, height)：绘制填充的矩形。- strokeRect(x, y, width, height)：绘制边框的矩形。- clearRect(x, y, width, height)：清除指定矩形区域的内容。- fillText(text, x, y [, maxWidth])：绘制填充的文本。- strokeText(text, x, y [, maxWidth])：绘制边框的文本。- drawImage(image, x, y [, width, height])：绘制图像。
路径绘制：- beginPath()：开始绘制路径。- moveTo(x, y)：将笔触移动到指定位置。- lineTo(x, y)：绘制一条直线到指定位置。- arc(x, y, radius, startAngle, endAngle [, anticlockwise])：绘制圆弧。(x:圆心的 x 坐标,y:圆心的 y 坐标,radius:圆的半斤，startAngle:起始角度，以弧度为单位 ,endAngle:结束角度，以弧度为单位,anticlockwise（可选）：布尔值,表示绘制方向。如果为 true，则逆时针绘制；如果为 false（默认值），则顺时针绘制)- closePath()：闭合路径。- stroke()：绘制路径的边框。- fill()：填充路径。
样式设置：- fillStyle：设置图形的填充颜色或样式。- strokeStyle：设置图形的边框颜色或样式。- lineWidth：设置线条的宽度。- font：设置文本的字体样式。
其他方法：- save()：保存当前绘图状态。- restore()：恢复之前保存的绘图状态。- clearRect(x, y, width, height)：清除指定矩形区域的内容。- translate(x, y)：移动绘图原点。- rotate(angle)：旋转坐标系。- scale(x, y)：缩放绘图。

3.使用示例

1)绘制基础图案

<!DOCTYPE html>
<html lang="zh-cn">

<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>基本模板</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        canvas {
            background-color: #ccc;
        }
    </style>
</head>

<body>

    <!-- 
        特别提醒:
        canvas不是容器标签，是画布标签，用于绘制图形图像。
        需要结合JS才能使用。

        默认尺寸: 300 * 150
        不是通过css给图片上颜色, 也不是通过css给图片设置尺寸！！

        如果浏览器提示canvas标签包裹着的文本，就说明该浏览器不支持canvas标签，那就需要换一个浏览器试试！
     -->
    <canvas id="canvas">当前浏览器不支持canvas标签（画布标签）,请换一个浏览器再尝试！</canvas>

    <script>
        // canvas 是画布标签，需要结合JS才能使用。
        // 应用场景：
        // 1. 展示广告
        // 2. 数据统计（柱状图、折线图、饼状图）
        // 3. JS小游戏

        // 有哪些api?
        // 绘制线
        // 绘制矩形
        // 绘制圆形
        // 绘制图片
        // 绘制文本
        // ...

        // 怎么使用?
        // 获取canvas对象
        var canvas = document.getElementById("canvas");

        // 设置画布尺寸
        canvas.width = 600;
        canvas.height = 800;

        // 获取绘制图形图像的对象 （画笔）
        var pen = canvas.getContext("2d");
        console.log(pen);

        // 坐标（0,0）在画布的左上角

        // // 1) 绘制线
        // // 开始绘制
        // pen.beginPath();
        // // 设置描边颜色
        // pen.strokeStyle = "red";
        // // 设置线的宽度
        // pen.lineWidth = 5
        // // 设置线的样式
        // // pen.lineCap = ""
        // // 设置起点
        // // pen.moveTo(x,y)
        // pen.moveTo(100,200);
        // // 设置下一个点（终点）
        // pen.lineTo(500,200);
        // // 结束绘制
        // pen.closePath();
        // // 描边
        // pen.stroke();

        // // 2) 绘制三角形
        // // 开始绘制
        // pen.beginPath();
        // // 设置描边颜色
        // pen.strokeStyle = "red";
        // // 填充颜色
        // pen.fillStyle="yellow"
        // // 设置线的宽度
        // pen.lineWidth = 5
        // // 设置线的样式
        // // pen.lineCap = ""
        // // 设置起点
        // // pen.moveTo(x,y)
        // pen.moveTo(100,200);
        // // 设置下一个点
        // pen.lineTo(500,200);
        // // 设置下一个点（终点）
        // pen.lineTo(300,400);
        // // 结束绘制
        // pen.closePath();
        // // 描边
        // pen.stroke();
        // // 填充
        // pen.fill();

        // // 4) 绘制矩形 （第一种写法）
        // // 开始绘制
        // pen.beginPath();
        // // 设置描边颜色
        // pen.strokeStyle = "red";
        // // 填充颜色
        // pen.fillStyle = "yellow"
        // // 设置线的宽度
        // pen.lineWidth = 5
        // // 设置线的样式
        // // pen.lineCap = ""
        // // 设置起点
        // // pen.moveTo(x,y)
        // pen.moveTo(100, 200);
        // // 设置下一个点
        // pen.lineTo(500, 200);
        // // 设置下一个点
        // pen.lineTo(500, 400);
        // // 设置下一个点（终点）
        // pen.lineTo(100, 400);
        // // 结束绘制
        // pen.closePath();
        // // 描边
        // pen.stroke();
        // // 填充
        // pen.fill();

        // // 4) 绘制矩形 （第二种写法）
        // // 开始绘制
        // pen.beginPath();
        // // 设置描边颜色
        // pen.strokeStyle = "red";
        // // 填充颜色
        // pen.fillStyle = "yellow"
        // // 设置线的宽度
        // pen.lineWidth = 5
        // // 设置线的样式
        // // pen.lineCap = ""
        // // 设置距离的坐标和尺寸
        // // pen.rect(x, y, w,h);
        // pen.rect(100, 200, 400,200);
        // // 结束绘制
        // pen.closePath();
        // // 描边
        // pen.stroke();
        // // 填充
        // pen.fill();

        // // 4) 绘制矩形 （第三种写法）
        // // 开始绘制
        // pen.beginPath();
        // // 设置描边颜色
        // pen.strokeStyle = "red";
        // // 填充颜色
        // pen.fillStyle = "yellow"
        // // 设置线的宽度
        // pen.lineWidth = 5
        // // 设置线的样式
        // // pen.lineCap = ""
        // // 设置距离的坐标和尺寸
        // // pen.rect(x, y, w,h);
        // pen.fillRect(100, 200, 400, 200);
        // pen.strokeRect(100, 200, 400, 200);
        // // 结束绘制
        // pen.closePath();

        // 5） 绘制弧形、圆形
        // 一个圆形 360 °
        // 涉及弧度的计算(公式)
        // 弧度 = 角度 * Math.PI / 180 

        pen.beginPath();
        // 设置描边颜色
        pen.strokeStyle = "red";
        // 填充颜色
        pen.fillStyle = "yellow";
        // 定义对象记录坐标，半径
        var point = {
            x: 100,
            y: 200,
            r: 100,// 半径
        }
        // 设置圆心坐标
        pen.moveTo(point.x, point.y);
        // 绘制一个圆形
        pen.arc(
            point.x, //  x坐标
            point.y, // y坐标
            point.r,  // 半径
            180 * Math.PI / 180, // 开始弧度
            360 * Math.PI / 180,// 结束弧度
            true // false 顺时针，否则反之
        )
        // 结束绘制
        pen.closePath();
        // 描边
        pen.stroke();
        // 填充
        pen.fill();

        // 6) 绘制文本
        pen.beginPath();
        // 填充颜色
        pen.fillStyle = "red";
        // 设置字体
        pen.font = "20px  微软雅黑";
        // 设置文本水平位置
        pen.textAlign="center";
        // 设置垂直文本位置
        pen.textBaseline = "bottom";
        // 填充文本
        pen.fillText("休息一哈！",point.x,point.y);
        pen.closePath();

    </script>
</body>

</html>

2)绘制组合图案(一个爱心)

<!DOCTYPE html>
<html lang="zh-cn">

<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>基本模板</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>

<body>
    <canvas id="canvas" class="bg-success"></canvas>
    <script>
        // 获取canvas对象
        var canvas = document.getElementById("canvas");

        // 设置画布尺寸
        canvas.width = 600;
        canvas.height = 800;

        // 获取绘制图形图像的对象 （画笔）
        var pen = canvas.getContext("2d");
        // console.log(pen);

        // 绘制矩形
        var drawRect = function (x, y, w, h, color) {
            pen.beginPath();
            pen.fillStyle = color || "red";
            pen.fillRect(x, y, w, h);
            pen.closePath();
        }
        // 绘制圆形
        var drawCircle = function (x, y, r, s, e, color) {
            pen.beginPath();
            pen.fillStyle = color || "red";
            // pen.strokeStyle= color || "red";
            pen.arc(
                x,
                y,
                r,
                s * Math.PI / 180,
                e * Math.PI / 180,
                true
            )
            pen.closePath();
            pen.fill();
            // pen.stroke();
        }

        // 定义对象记录坐标尺寸
        var point = {
            x: 100,
            y: 200,
            w: 100,
            h: 100,
            r: 50
        }
        // 先绘制矩形
        drawRect(
            point.x,
            point.y,
            point.w,
            point.h
        )

        // 在绘制圆形状
        drawCircle(
            point.x + 50,
            point.y,
            point.r,
            0,
            360
        )
        drawCircle(
            point.x,
            point.y + 50,
            point.r,
            0,
            360
        )

        // 判断绘制的角度是为顺时针
        // pen.beginPath();
        // pen.strokeStyle= "red";
        // pen.arc(
        //     400,
        //     400,
        //     100,
        //     0 * Math.PI / 180,
        //     90 * Math.PI / 180,
        //     false // false 顺时针 , true 是逆时针
        // )
        // pen.stroke();
    </script>
</body>

</html>

3)做一幅动图

<!DOCTYPE html>
<html lang="zh-cn">

<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>基本模板</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>

<body>
    <canvas id="canvas"></canvas>
    <!-- <img src="./assets/2.jpg" alt=""> -->
    <script>
        // 获取画布标签
        var canvas = document.querySelector("#canvas");
        //  创建图片
        var img = new Image();
        //  请求图片资源
        img.src = "./assets/2.jpg";
        //  设置画布尺寸
        canvas.width = 800;
        canvas.height = 600;
        // 获取canvas上下对象（画笔）
        var ctx = canvas.getContext("2d");
        // console.log(ctx);
         // 记录每一帧动画的坐标和尺寸
        var arr = [
            { sx: 30,  sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },
            { sx: 210, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },
            { sx: 380, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },
            { sx: 568, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },
            { sx: 10, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 },
            { sx: 216, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 },
            { sx: 410, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 },
            { sx: 590, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 }
        ]
        // 记录数组的索引
        var index = 7;

        
        // 绘制图像
        img.onload = function () {

            // 绘制图片
            // ctx.drawImage(
            //     img,// 图片资源
            //     0,// 在画布的x坐标
            //     0,// 在画布的y坐标
            //     img.width * (1/2),// 在画布的尺寸
            //     img.height* (1/2)// 在画布的尺寸
            // )

            // 绘制图片部分的效果（裁剪图片绘制在画布上）
            // ctx.drawImage(
            //     img,// 图片资源
            //     0, // 在图片的x坐标
            //     0, // 在图片的y坐标
            //     192, // 裁剪图片的宽度
            //     260,// 裁剪图片的高度

            //     0,// 在画布的x坐标
            //     0,// 在画布的y坐标
            //     192,// 在画布的尺寸
            //     260// 在画布的尺寸
            // )

            // 把裁剪的坐标尺寸和画布的坐标尺寸做成变量
            ctx.drawImage(
                img,// 图片资源
                arr[index].sx, // 在图片的x坐标
                arr[index].sy, // 在图片的y坐标
                arr[index].sw, // 裁剪图片的宽度
                arr[index].sh, // 裁剪图片的高度
                arr[index].x,  // 在画布的x坐标
                arr[index].y,  // 在画布的y坐标
                arr[index].w,  // 在画布的尺寸
                arr[index].h   // 在画布的尺寸
            )
        }

        // 使用定时器
        var timer = setInterval(function(){
            index ++;
            index = index > arr.length-1 ? 0: index;

            // 先清除画布
            ctx.clearRect(
                0,
                0,
                canvas.width,
                canvas.height
            )

            // 再绘制图片
            ctx.drawImage(
                img,// 图片资源
                arr[index].sx, // 在图片的x坐标
                arr[index].sy, // 在图片的y坐标
                arr[index].sw, // 裁剪图片的宽度
                arr[index].sh, // 裁剪图片的高度
                arr[index].x,  // 在画布的x坐标
                arr[index].y,  // 在画布的y坐标
                arr[index].w,  // 在画布的尺寸
                arr[index].h   // 在画布的尺寸
            )
        }, 1000 / 12);// 一秒钟执行12次

    </script>

</body>

</html>

三、svg与canvas的区别

1、canvas时h5提供的新的绘图方法

svg已经有了十多年的历史

2、vanvas画图基于像素点，是位图，如果进行放大或缩小会失真

svg基于图形，用html标签描绘形状，放大缩小不会失真

3、canvas需要在js中绘制

svg在html正绘制

4、canvas支持颜色较svg多

5、canvas无法对已经绘制的图像进行修改、操作

svg可以获取到标签进行操作

标签：学习 html5 javascript

本文转载自: https://blog.csdn.net/weixin_245249828/article/details/136688229
版权归原作者 吃清心的椰羊 所有，如有侵权，请联系我们删除。

前端小白的学习之路(HTML5 二)

目录

一、svg标签

1.简介

2.常用属性

3.<path>标签

4.使用示例

二、canvas标签

1.简介

2.常用属性与方法

3.使用示例

1)绘制基础图案

2)绘制组合图案(一个爱心)

3)做一幅动图

三、svg与canvas的区别

发表评论

“前端小白的学习之路(HTML5 二)”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航