SVG、canvas、绘制线段和填充多边形、矩形、曲线的绘制和填充

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

1.了解网页中的两个绘图技术

（1）SVG

（2）canvas

（3）画布的尺寸和坐标

2.绘制线段和填充多边形

3.矩形的绘制

4.曲线的绘制和填充

---

---

---

1.了解网页中的两个绘图技术

（1）SVG

（1）SVG是一种可伸缩的矢量图型，它基于XML并用于描述图形的语言；

（2）不同于用像素来描绘的矩阵图像（JPG、PNG、GIF），SVG是和分辨率无关的；

（3）SVG图像可以通过JS和DOM操作来创建和操控；

（4）SVG有一些预定义的形状元素，可被开发者使用和操作：矩形、圆形、椭圆、线、折线、多边形、路径

svg的使用方式：
        （1）svg文件可以直接插入到网页中，称为DOM的一部分，然后使用js和css进行操作。

        （2）svg代码可以写在一个独立文件中，然后用“img/object/iframe/embed”标签插入到网页中

        （3）css可以直接使用svg文件。

        （4）svg还可以转为BASE64编码，作为Data url写入网页中。

（1）SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。
（2）SVG 用来定义用于网络的基于矢量的图形。
（3）SVG 使用 XML 格式定义图形。
（4）SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
（5）SVG 是万维网联盟的标准。
（6）SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

（2）canvas

canvas：画布，h5新标签；

        （1）canvas本身没有任何外观，只是在文档中创建了一个画板；

        （2）ie9之前的版本不支持canvas；

        （3）画布的宽度和高度要用canvas的属性设置，不要直接在css里面定义；

        （4）画布的getContext()方法返回一个“绘制上下文”对象； 绝大多数的画布绘制API来自这个对象； 也就是说画布元素和他的上下文对象是两个完全不同的概念； 调用该方法时，传递的参数是“2d”，也就是getContext('2d')，可以在画布上绘制二维图像； 3d绘制就相对比较复杂了，具体实现还在规范中；

（3）画布的尺寸和坐标

        – 画布以左上角(0, 0)为坐标原点；

        – 往右为X轴的坐标不断增大；

        – 往下为Y轴的坐标不断增大；

2.绘制线段和填充多边形

        （1）绘制线段的API是上下文对象的方法；

        （2）beginPath：开始定义一条新的路径；

        （3）moveTo：开始定义一条新的子路径，该方法确定了线段的起点；

        （4）lineTo：将上面定义的线段起点和指定的新的点连接起来；

        （5）到这里只是规划好了思路，还没有在画布上画出任何图形；

        （6）fill()：填充区域，此时只是填充，起点和终点并没有连接起来；

        （7）closePath：会把起点和终点连接起来；

        （8）stroke()：开始绘制图形，当前路径下的所有子路经都会绘制出来；

        （9）如果要接着绘制新的路径，记得调用beginPath()方法；

案例例如：

 <style>
        #box{
            border: 1px gray solid;
        }
    </style>
    <canvas id="box" width="600" height="500"> 123456</canvas>

  <script>
        var canvas=document.querySelector('#box');
        var ctx=canvas.getContext("2d") //Context 上下文
        ctx.lineWidth=10 //线条宽度
        ctx.strokeStyle="red" //线条颜色
        ctx.moveTo(100,100)
        ctx.lineTo(300,300)

        ctx.moveTo(400,400)
        ctx.lineTo(100,100)

        ctx.moveTo(400,400)
        ctx.lineTo(300,300)

        ctx.stroke()



        // lineTo()会把上一次的作为这一次的起点,没有上一次的终点那就没有这一次的起点
        ctx.lineTo(100,100)
        ctx.lineTo(200,200)
        ctx.lineTo(300,300)
    </script>

效果如下：

3.矩形的绘制

（1）rect()：在当前子路经添加一条弧线；

        语法：context.rect(x,y,width,height);

        四个参数： 起点坐标x,y：左上角坐标； 宽度width：矩形的宽度； 高度height：矩形的高度；

（2）strokeRect()方法可以直接绘制一个矩形；

        语法：context.strokeRect(x,y,width,height);

例如：

 <style>
        #box{
            border: 1px gray solid;
        }
    </style>
    <canvas id="box" width="600" height="500"> 123456</canvas>

    <script>
        var canvas=document.querySelector('#box');
        var cdx=canvas.getContext("2d") //Context 上下文
         // 绘制矩形
        cdx.rect(200,100,300,400) //轨迹
        cdx.fillStyle="orange"
        cdx.fill()
        cdx.stroke()
    </script>   

运行结果：

4.曲线的绘制和填充

arc()：在当前子路经添加一条弧线；

语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图

案例如下:

    <style>
        #box{
            border: 1px gray solid;
        }
    </style>
     <canvas id="box" width="600" height="500"> 123456</canvas>
    
    <script>
          var canvas=document.querySelector('#box');
          var cdx=canvas.getContext("2d") //Context 上下文
          let deg=Math.PI/180
          cdx.arc(300,250,200,0*deg,360*deg,false)
          cdx.stroke()
     </script>

运行结果：