svg矢量图、画图、Canvas绘制文本与渐变

最新推荐文章于 2024-06-06 08:45:13 发布

博博915

最新推荐文章于 2024-06-06 08:45:13 发布

阅读量561

点赞数

分类专栏：笔记文章标签：大数据 html5

本文链接：https://blog.csdn.net/weixin_56393766/article/details/125821266

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

svg矢量图的使用

今天学习了矢量图的三种使用方法，迫不及待想要和大家分享。

一、什么是 SVG

SVG 是可缩放矢量图形，用户可以用代码来直接描绘图像。区别于 JPG 和 PNG 的需要用引擎来加载的图片，它直接用画布绘制，所以是无损失的。

二：svg的优点

减少页面请求的压力
SVG比其他的图片都要更小
SVG是一种可伸缩的图片
SVG 图像可以在任何分辨率下轻松打印
SVG 可以自定义

三：使用方法：

x y表示开始坐标 width和height表示矩形的宽度和高度没有设置填充颜色之前默认是黑色 fill设置填充颜色

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   
        <rect x="30" y="30" width="100" height="100" fill="pink" class="r"/>
    </svg>

svg路径

M:moveTo 移动到某个坐标点
L:lineTo:画线到某个坐标点
Z:close闭合
stork:线的颜色
stork-width:线的宽度

 <path d="M75,20 L100,100,L400,150,Z" fill="pink" stroke="yellow" stroke-width="10"> </path> 
 // 大写是绝对定位 小写是相对定位 相对上一个坐标
  <path d="M75,20 l50,0,L50,10 Z" fill="" stroke="green" stroke-width=""> </path>

cx和cy定义的是圆心的x y坐标 r代表半径

<circle cx="100" cy="50" r="40" fill="" stroke="green" stroke-width="10">

参数分别代表开始坐标最大半径和最小半径旋转角度大小角弧线(1,0) 顺逆时针(1,0) 结束的坐标 x y

<path d="M120,120 A60 60 0 1 1 121 121 Z" fill="" stroke="pink" stroke-width="20"> </path>

svg动画

svg动画由于某些场景不能用,只需要简单了解即可.
跟css动画很像
attriName:变形
type:选择动画操作方式这里是旋转
form:从哪里开始
to:从哪里结束
dur:动画执行时间
repeatCount:动画重复次数

svg文字

定义一个路线 path id作为文字执行路线的名称根据id选择文字根据哪条路线样式


        <defs>
            <path d="M0 50 l100 100 l100 -100 Z " id="p1"/>
            <path d="M0 50 l100 100 l100 -100 Z " id="p2"/>
        </defs>
        <text x=""  y="" style="">
            <textPath xlink:href="#p1">
                陶大花 胖琳 可真是个可人啊一群老六
                
            </textPath>
        </text>

SVG 圆

下面是一个 SVG 示例的代码，用 <circle> 标签绘制一个圆：

<!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>
</head>
<body>
    <svg id="svgelem" height="200">
         <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
    </svg>
</body>
</html>

运行该代码会生成如下结果：

SVG 矩形
下面是一个 SVG 示例的代码，用 <rect> 标签绘制一个矩形：

<!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>
</head>
<body>
    <svg id="svgelem" height="200">
        <rect id="redrect" width="300" height="100" fill="red" />
    </svg>    
</body>
</html>

运行该代码会生成如下结果：

SVG 椭圆
下面是一个 SVG 示例的代码，用 <line> 标签绘制一个线条：

<!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>
</head>
<body>
     <svg id="svgelem" height="200">
        <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
    </svg>
</body>
</html>

运行该代码会生成如下结果：

svg还可以适用于渐变色：

<!DOCTYPE html>
<html lang="zh">
<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>渐变色</title>
</head>
<body>
        <canvas id="canvas" height="1000" width="1000">
            您的浏览器不支持，请升级浏览器
        </canvas>
    <script type="text/javascript">
        /** @type {HTMLCanvasElement} */
        //1.获取画布
        var canvas = document.getElementById("canvas");
        //2.创建画布上下文对象
        var context = canvas.getContext("2d");
        // 绘制圆渐变
        var radial = context.createRadialGradient(210, 210, 20, 210, 210, 180);
        radial.addColorStop(0, "red");
        radial.addColorStop(0.4, "orange");
        radial.addColorStop(0.8, "yellow");
        radial.addColorStop(1, "green");
        context.arc(210, 210, 200, 0, Math.PI * 2);
        context.fillStyle = radial;
        context.fill();
        //3.beginPaht()
        context.beginPath();
        context.font="20px 宋体";
        context.fillStyle="red";
        context.fillText("Hello Worle",30,50);
    </script>
</body>
</html>

运行该代码会生成如下结果：

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>基本动画</title>
</head>
<body>
    <svg width="800" height="800">
            <circle id="mycircle" cx="100" cy="100" r="5">
                <animate attributeType="XML"
                    attributeName="r"
                    from="0" to="100"
                    begin="click" 
                    dur="5"
                    fill="freeze"
                    xlink:href="#mycircle"
                    repeatCount="indefinite">
                </animate>
                <animate attributeType="XML"
                attributeName="fill"
                from="red" to="green"
                dur="5"
                fill="freeze"></animate>
                <animate attributeType="XML"
                attributeName="cx"
                from="100" to="500"
                begin="click" 
                dur="5"
                fill="freeze"></animate>
            </circle>
    </svg>
</body>
</html>

下面的太极图参考：(26条消息) 太极图HTML+CSS（可旋转）代码记录_林恒smileZAZ的博客-CSDN博客

<!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>
         body {
            background: silver;
            height: 2000px;
        }
        #canvas {
            position: absolute;
            top: 20%;
            left: 50%;
            margin-left: -250px;
            animation: rotate1 .1s linear infinite; 
        }
        @keyframes rotate1 {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div>
        <!-- canvas画布 -->
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
    <script>
        let ctx = document.getElementById("canvas").getContext("2d");
        // 创建context对象
        // 左大半圆
        ctx.beginPath();
        // 起始路径
        ctx.fillStyle = "red";
        // 填充颜色
        ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, false);
        // 创建弧/曲线
        //arc(x,y,r,起始角，结束角，顺时针) 
        ctx.closePath();
        // 从当前点返回起始路径
        ctx.fill();
        // 填充绘图
        // 右大半圆
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, true);
        ctx.closePath();
        ctx.fill();
        // 右小半圆
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(250, 150, 100, Math.PI / 2, Math.PI * 1.5, true);
        ctx.closePath();
        ctx.fill();
        // 左小半圆
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 350, 100, Math.PI / 2, Math.PI * 1.5, false);
        ctx.closePath();
        ctx.fill();
        // 上小圆
        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.arc(250, 150, 25, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
        // 下小圆
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(250, 350, 25, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    </script>
</body>
</html>

效果没办法放动图这里就不展示了