HTML5中的canvas、SVG、drag

• canvas：用于图形的绘制，通过js完成，也就是个画布(位图）

1. 属性：
   1. id
   2. width
   3. height
   4. style
2. 使用
   1. 创建一个canvas

          <canvas id="a" width="200px" height="200px" ></canvas>
      

   2. 使用js绘图

      1. 获取canvas元素并创建context对象

          var a=document.getElementById('a')
          var ctx=a.getContext('2d')//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

      2. 使用方法绘制图像

         1. 颜色、样式、阴影

            //fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。取值可以为颜色、渐变对象、pattern对象
             ctx.fillStyle = 'red'
             ctx.fillRect(0, 0, 150, 75);
            
            // strokeStyle	设置或返回用于笔触的颜色、渐变或模式。取值可以为颜色、渐变对象、pattern对象
             ctx.strokeStyle='red'
             ctx.strokeRect(0,0,100,100)
            
            // shadowColor	设置或返回用于阴影的颜色。注意该属性须在绘制方法前使用
             ctx.fillStyle = 'red'
             ctx.shadowBlur=20
             ctx.shadowColor='yellow'
             ctx.fillRect(0, 0, 150, 75);
            
            // shadowBlur	设置或返回用于阴影的模糊级别。即模糊的范围大小
             ctx.fillStyle = 'red'
             ctx.shadowBlur=100
            ctx.shadowColor='yellow'
             ctx.fillRect(0, 0, 150, 75);
            
            // shadowOffsetX	设置或返回阴影与形状的水平距离。
             ctx.fillStyle = 'red'
             ctx.shadowBlur=100
             ctx.shadowColor='yellow'
             ctx.shadowOffsetX=200
             ctx.fillRect(0, 0, 150, 75);
            
            // shadowOffsetY	设置或返回阴影与形状的垂直距离。
             ctx.fillStyle = 'red'
             ctx.shadowBlur=100
             ctx.shadowColor='yellow'
             ctx.shadowOffsetY=200
             ctx.fillRect(0, 0, 150, 75);
            
            // createLinearGradient()	创建线性渐变（用在画布内容上）。
            var line=ctx.createLinearGradient(0,0,100,30)
            line.addColorStop(0,'red')
            line.addColorStop(1,'white')
            ctx.fillStyle=line
            ctx.fillRect(0,0,200,200)	
            
            // createPattern()	在指定的方向上重复指定的元素。参数第一个为重复的图片、视频、画布等，第二个为重复的模式(字符串）：repeat	默认。该模式在水平和垂直方向重复。repeat-x	该模式只在水平方向重复。repeat-y	该模式只在垂直方向重复。no-repeat	该模式只显示一次（不重复）
            var img=document.getElementById('i')
            var  pa=ctx.createPattern(img,'no-repeat')
            ctx.rect(0,0,200,200)
            ctx.fillStyle=pa
            ctx.fill()
            
            // createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）。参数为:x0	渐变的开始圆的 x 坐标y0	渐变的开始圆的 y 坐标 r0	开始圆的半径 x1	渐变的结束圆的 x 坐标 y1	渐变的结束圆的 y 坐标r1	结束圆的半径
            var r=ctx.createRadialGradient(50,50,20,50,50,150)
            r.addColorStop(0,"red")
            r.addColorStop(1,'blue')
            ctx.fillStyle=r
            ctx.fillRect(0,0,200,200)
            
            // addColorStop()	规定渐变对象中的颜色和停止位置。

         2. 线条样式

            // lineCap	设置或返回线条的结束端点样式。参数为：butt	默认。向线条的每个末端添加平直的边缘。round	向线条的每个末端添加圆形线帽。square	向线条的每个末端添加正方形线帽。
            // ctx.beginPath()
            // ctx.lineCap='round'
            // ctx.moveTo(20,30)
            // ctx.lineTo(100,30)
            // ctx.stroke()
            // lineJoin	设置或返回两条线相交时，所创建的拐角类型。参数为：bevel	创建斜角。round	创建圆角。miter	默认。创建尖角。
            ctx.beginPath()
            ctx.moveTo(20,30)
            ctx.lineTo(20,50)
            ctx.lineTo(50,90)
            ctx.lineWidth=30
            ctx.lineJoin='bevel'
            ctx.stroke()
            // lineWidth	设置或返回当前的线条宽度。参数为number类型
            // miterLimit	设置或返回最大斜接长度，即两条线相交时内角到外角的距离。参数为number类型

         3. 矩形

            // rect()	创建矩形,四个参数，起点的xy和矩形的宽高，确定起点和宽高，但未绘制。
            ctx.rect(20,20,100,100)
            ctx.stroke()
            // fillRect()	绘制"被填充"的矩形，四个参数，起点的xy和矩形的宽高。
            // strokeRect()	绘制矩形（无填充），四个参数，起点的xy和矩形的宽高。
            // clearRect()	在给定的矩形内清除指定的像素，四个参数，起点的xy和矩形的宽高。

         4. 路径

            // fill()	填充当前绘图（路径）,即实心的。
            // stroke()	绘制已定义的路径 即空心的。
            // beginPath()	起始一条路径，或重置当前路径。
            // moveTo()	把路径移动到画布中的指定点，不创建线条。参数为x，y
            // closePath()	创建从当前点回到起始点的路径。
            // lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。参数为x，y
            // clip()	从原始画布剪切任意形状和尺寸的区域.先裁剪后绘制。
            // quadraticCurveTo()	创建二次贝塞尔曲线,前两个参数是控制点的xy坐标，后两个参数是介素点的xy坐标
            // bezierCurveTo()	创建三次贝塞尔曲线，前两个参数是第一个控制点的xy坐标，中间两个参数是第二个控制点的xy坐标，后两个参数是介素点的xy坐标
            // arc()	创建弧/曲线（用于创建圆形或部分圆），参数为x	圆的中心的 x 坐标。y	圆的中心的 y 坐标。r	圆的半径。sAngle	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。eAngle	结束角，以弧度计。counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
            // arcTo()	创建两切线之间的弧/曲线。参数为x1为圆弧两条切线交点的横坐标，y1为圆弧两条切线交点的纵坐标，x2为第二条切线上的一点的横坐标，y2为第二条切线上的一点的横坐标，r为半径
            // isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。参数为x：测试的x坐标，y：测试的y坐标
            //1
            ctx.beginPath()
            ctx.moveTo(20,200)
            ctx.lineTo(200,80)
            ctx.lineTo(30,40)
            ctx.closePath()
            ctx.clip()
            ctx.stroke()
            ctx.fillStyle='blue'
            ctx.fillRect(0,0,200,200)
            //2
            ctx.beginPath()
            ctx.moveTo(20,20)
            ctx.quadraticCurveTo(30,100,200,20)
            ctx.stroke()
            

         5. 转换

            // scale()	缩放当前绘图至更大或更小,参数为缩放的宽度和高度，缩放后需重新绘制。
             ctx.fillRect(0,0,20,20)
             ctx.scale(2,1)
             ctx.fillRect(0,0,20,20)
             ctx.stroke()
            
            // rotate()	旋转当前绘图,参数为角度。
            ctx.rotate(20*Math.PI/180)
            ctx.fillRect(0,0,20,20)
            
            // translate()	重新映射画布上的 (0,0) 位置,即修改（0，0）的位置到新的位置。
            ctx.fillRect(0,0,20,20)
            ctx.translate(10,10)
            ctx.fillRect(0,0,20,20)
            
            // transform()	替换绘图的当前转换矩阵，transform() 方法的行为相对于由 rotate()、scale()、translate() 或 transform() 完成的其他变换，参数分别为缩放、旋转、平移。
            
            // setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

         6. 文本

            //font	设置或返回文本内容的当前字体属性，与css中的字体属性相同可以有font-size、font-weight等。
            ctx.font='20px'
            
            // textAlign	设置或返回文本内容的当前对齐方式。值为start	默认：文本在指定的位置开始。end	：文本在指定的位置结束。center：	文本的中心被放置在指定的位置。left	：文本在指定的位置开始。right	文本在指定的位置结束。
            
            // textBaseline	设置或返回在绘制文本时使用的当前文本基线。值可以为alphabetic	默认。文本基线是普通的字母基线。top：	文本基线是 em 方框的顶端。hanging	：文本基线是悬挂基线。middle	：文本基线是 em 方框的正中。ideographic	：文本基线是表意基线。bottom：	文本基线是 em 方框的底端。
            
            // fillText()	在画布上绘制"被填充的"文本,参数为文本内容、开始输出文本的横坐标和纵坐标。
            ctx.fillText('hhhhh',20,20)
            
            // strokeText()	在画布上绘制文本（无填充），参数为文本内容、开始输出文本的横坐标和纵坐标。。
            ctx.strokeText('yyy',40,40)
            
            // measureText()	返回包含指定文本宽度的对象，即可以用来检查某个文本的宽度
            var obj=ctx.measureText('kkk').width
            console.log(obj)

         7. 图像绘制

            //drawImage() 方法在画布上绘制图像、画布或视频。
            
            var i=document.getElementById('i')
            i.onload=function(){
                ctx.drawImage(i,20,20)// 规定图像的宽高 ctx.drawImage(i,20,20，100，100)
            
            }
            drawImage()
            
            
            //drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸
            context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)//sx为剪切开始的x坐标，sy为剪切开始的y坐标

         8. 合成

            
            // globalAlpha	设置或返回绘图的当前 alpha 或透明值，值可以为number类型，取值在0-1之间。默认为1。
            
            // globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。
            // 取值为：
            // source-over	默认。在目标图像上显示源图像。
            // source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
            // source-in	在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
            // source-out	在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
            // destination-over	在源图像上显示目标图像。
            // destination-atop	在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
            // destination-in	在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
            // destination-out	在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
            // lighter	显示源图像 + 目标图像。
            // copy	显示源图像。忽略目标图像。
            // xor	使用异或操作对源图像与目标图像进行组合。
            
            

         9. 其他

            //save()	保存当前环境的状态。
            //restore()	返回之前保存过的路径状态和属性。

         10. 像素操作

             // createImageData()	创建新的、空白的 ImageData 对象。参数为width，height、另一个imgdata
             // createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black (0,0,0,0)。
             // 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
             // R - 红色（0-255）
             // G - 绿色（0-255）
             // B - 蓝色（0-255）
             // A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
             
             // getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据，参数为（x,y,width,height)f分别为开始复制的左上角的坐标和复制的矩形区域的宽高。
             
             // putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。
             var imgData=ctx.createImageData(100,100);
             console.log(imgData.data.length)//40000,有10000个像素，每个像素有四条消息
             for (var i=0;i<imgData.data.length;i+=4)
               {
               imgData.data[i+0]=255;
               imgData.data[i+1]=0;
               imgData.data[i+2]=0;
               imgData.data[i+3]=255;
               }//四个元素为一个像素的值，分别设置每个像素的四条消息（ ， ， ， ）
             ctx.putImageData(imgData,10,10);
             
             width	返回 ImageData 对象的宽度。
             height	返回 ImageData 对象的高度。
             data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

• SVG：可缩放矢量图，使用xml格式定义图像：参考手册

1. 在html文件中使用
   1. 写成文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>

          <!-- 允许使用脚本，但只支持在h5使用 -->
          <embed src="circle.svg" type="image/svg+xml" />
          <!-- 支持HTML4，XHTML和HTML5标准，不允许使用脚本 -->
          <object data="circle.svg" type="image/svg+xml"></object>
          <!-- 允许使用脚本，但只支持在h5使用 -->
          <iframe src="circle.svg" frameborder="0"></iframe>

   2. 直接嵌入到HTML页面中，或可以直接链接到SVG文件。

          <!-- 在html中直接使用svg标签 -->
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
           </svg>
           <!-- 通过a标签直接链接到svg文件 -->
           <a href="circle.svg">jjj</a>

2. 预定义的形状元素

   1. 矩形:rect

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <!-- 属性：x为矩形距离浏览器窗口左侧的距离，y为矩形距离浏览器窗口顶端的距离，rx和ry定义圆角，width和height设置当前矩形的宽高，style用于设置css样式，fill用于填充，stroke表示边框，opacity表示元素的透明度 -->
              <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
                  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
      </svg>

   2. 圆形:circle

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <!--cx和cy表示圆点的坐标，如果未设置即圆点为（0，0），r表示半径-->
        <circle cx="100" cy="50" r="40" stroke="black"
        stroke-width="2" fill="red"/>
      </svg>
      

   3. 椭圆:ellipse

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <!--cx和cy表示圆点的坐标，如果未设置即圆点为（0，0），rx表示x方向的半径，ry表示y方向上的半径-->
        <ellipse cx="300" cy="80" rx="100" ry="50"
        style="fill:yellow;stroke:purple;stroke-width:2"/>
      </svg>

   4. 直线:line

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <!--属性为起点的x，y值和终点的x，y值-->
        <line x1="0" y1="0" x2="200" y2="200"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
      </svg>

   5. 折线:polyline

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <!--属性points定义各个点的坐标-->
        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
        style="fill:none;stroke:black;stroke-width:3" />
      </svg>

   6. 多边形:polygon

      <svg  height="210" width="500">
      <!--属性points定义各个点的坐标，如下面为3个角分别为（200，10），（250，190），（160，210）-->
        <polygon points="200,10 250,190 160,210"
        style="fill:lime;stroke:purple;stroke-width:1"/>
      </svg>

   7. 路径:path

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          <path d="M150 0 L75 200 L225 200 Z" stroke="red" stroke-width='2' />
      </svg>
      属性d中可使用的命令包括如下，当命令使用大写时为绝对定位，小写为相对定位，后加点的坐标：
      M = moveto//表示移动到某个位置
      L = lineto//移动到某个位置，并创建一条线到该位置
      H = horizontal lineto
      V = vertical lineto
      C = curveto
      S = smooth curveto
      Q = quadratic Bézier curve//二次Bézier曲线
      T = smooth quadratic Bézier curveto
      A = elliptical Arc//椭圆弧
      Z = closepath//闭合路径
      属性stroke定义一条线，文本或元素轮廓颜色
      
      stroke-width 属性定义了一条线，文本或元素轮廓厚度
      
      stroke-linecap表示线段的两端点的样式，可以取值为butt、round、square
      
      strokedasharray属性用于创建虚线

3. 文本

   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <!--x，y表示起点的坐标，fill定义填充的颜色-->
     <text x="0" y="15" fill="red">I love SVG</text>
   </svg>

4. 滤镜

5. 模糊效果（ Internet Explorer和Safari不支持SVG滤镜）

   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <defs>
       <filter id="f1" x="0" y="0">
         <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
       </filter>
     </defs>
     <rect width="90" height="90" stroke="green" stroke-width="3"
     fill="yellow" filter="url(#f1)" />
   </svg>
   <!--<filter>元素id属性定义一个滤镜的唯一名称
   <feGaussianBlur>元素定义模糊效果
   in="SourceGraphic"这个部分定义了由整个图像创建效果
   stdDeviation属性定义模糊量
   <rect>元素的滤镜属性用来把元素链接到"f1"滤镜，即通过defs和filter标签加上feGaussianBlu标签定义模糊效果，使用filter在元素上使用-->

6.    阴影     

• drag：拖拽事件

1. 在需要可以被拖拽的元素上面添加draggable属性和通过ondragstart设置开始拖拽时的事件
2. 在放置的元素伤通过ondragover阻止对元素的默认处理和通过ondrop设置存放时发生的事件

拖拽图片的案例：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            // 避免浏览器对数据的默认处理
            ev.preventDefault();
            //获取传递的数据，即img的id
            var data = ev.dataTransfer.getData("Text");
            //将元素添加到当前的元素中
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>

    <p>拖动 RUNOOB.COM 图片到矩形框中:</p>
    <!-- ondragover设置放到何处，如果设置允许放置，我们必须阻止对元素的默认处理方式，即ev.preventDefault(); -->
    <!-- ondrop表示进行放置时调用的函数 -->
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <!-- 通过draggable="true"将改元素设置为可拖放 -->
    <!-- 通过ondragstart="drag(event)"设置当元素被拖动时调用的函数 -->
    <img decoding="async" loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)"
        width="336" height="69">

</body>

</html>

canvas和svg的区别：

• canvas是位图，用于图形的绘制；svg是矢量图且svg可在图像质量不下降的情况下被放大
•