一、canvas

  canvas  画布,位图

  <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形

  注意:不要在style中给canvas设置宽高,会有位移差

  canvas的使用:

    先获取canvas

    var c=document.getElementById("c1")

    获取之后,需要给canvas设置一个绘图环境

    var can=c.getContext("2d")

  绘制方块:

    fillrect(x,y,w,h) 绘制一个填充的方格,默认颜色是黑色,

        前两个参数是坐标(x轴和y轴),后两个参数是宽高

    strokeRect(x,y,w,h) 绘制带边框的方块;

  设置绘图

    fillStyle:填充颜色(绘制canvas是有顺序的)

    lineWidth:线宽度,是一个数值

    strokeStyle:边线颜色

  注意填充(fillrect)和画线(strokeRect)的区别。

    先画线后填充。那么填充覆盖画线,线框的宽度就会缩小一倍

    先填充后画线。那么画线覆盖填充,方块的宽度就会缩小一倍

  边界的绘制

    beginPath:开始绘制路径

    closePath:结束绘制路径

    moveTo:移动到绘制的新目标点

    lineTo:新的目标点

    每个线条只能有一个moveTo()可以有多个lineTo()

  绘制路径

    stroke:画线,默认黑色

    fill:填充 默认黑色

    rect:矩形区域

    clearRect:删除一个画布的矩形区域

    save:保存路径

    restore:回复路径

  清除画布:

    clearRect(x,y,w,h) 清除画布

    前两个参数是坐标(x轴和y轴),后两个参数是宽高

  绘制圆形:

    arc(x,y,半径,起始弧度,结束弧度,旋转方向)

      x,y是圆心的坐标

      turn是逆时针,是从钟表3点的那个点开始旋转的

      逆时针为-,顺时针为+

  插入字体:

    fillText("内容",x,y) 在 canvas 上绘制实心的文本,xy是坐标

    strokeText("内容",x,y)在 canvas 上绘制空心的文本

    textAlign="center" 居中  也就是将xy坐标与字体的中心居中

  画布的平移和旋转

    translate(x,y) 平移

      画布的大小位置不变,是画布的起始位置变了,

      也就是说,是将画布的坐标平移了,原来的起始点(0,0)点,变成了你平移的位置加上-,

      起始点就是平移的位置

      但是作图的地方还是原来的大小

    rotate() 旋转

      属性是角度,

      旋转都是以画布的起始点(0,0)旋转

    scale(0.5,0.5) 缩放

      画布的缩放,其实就是讲画布向后移动,跟人的视距就变远了,近大远小

二、svg

  svg  矢量图

  svg绘制矢量图,canvas绘制位图的

  svg使用xml格式绘制图形的

  svg要有一个根节点,叫svg标签,就相等于html

  里面的xmlns是命名空间,version是版本

  如果不设置大小,默认占用大小为300x150

  定义矩形

    rect标签

      属性有:width,height,x,y,rx,ry,fill,stroke-width,stroke style

          stroke-width:线条宽度 stroke:线条颜色

          x 属性定义矩形的左侧位置

          y 属性定义矩形的顶端位置

          

      style="fill-opacity:0.2;stroke-opacity:0.5;opacity:0.5"

      fill-opacity和opacity的区别:

        fill-opacity只改变填充色的透明度 ,opacity改变fill和stroke的透明度都改变

  定义圆:circle

      circle
        cx:圆的x轴坐标

        cy:圆的y轴坐标

        r:圆的半径

        

  定义椭圆:ellipse
      ellipse
        CX属性定义的椭圆中心的x坐标

        CY属性定义的椭圆中心的y坐标

        RX属性定义的水平半径

        RY属性定义的垂直半径

          

  定义直线:line
      line
        x1 属性在 x 轴定义线条的开始

        y1 属性在 y 轴定义线条的开始

        x2 属性在 x 轴定义线条的结束

        y2 属性在 y 轴定义线条的结束

        必须结合stroke绘制

        

  定义折线:polyline
    polyline

    属性是points,折线点的坐标

    

  定义路径:path
    path,有个d属性
      d="定义路径指令"
      M = moveto 起点坐标,开始点

      L = lineto 相邻坐标,下一个点

      H = horizontal lineto H代表水平画线,默认Y轴上的值一样

      V = vertical lineto V代表水平画线,默认X轴上的值一样

      A = elliptical Arc 用于画曲线的

    以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位(相对于上一个点)。

      

  transform:转换,

    平移,旋转都是以起点((0,0)svg的左上角)点为参考点,而css中以元素的中心点为参考点

  组合  g
    g用于将 相关元素进行组合
    g身上的属性,子元素都会继承,但是g上的属性都必须是显现属性,不是svg元素私有的,
    比如g上的圆心坐标就不行

  定义文本:text

    x坐标,y坐标,

    xy的值在字体的左下角

    文字居中处理:text-anchor:middle;

      

  图片:image

    x,y是坐标,xlink:href="图片所在的路径"

    

  克隆:use

    x,y是相对于原始的元素的坐标位置,不是相对svg的(0,0)点的坐标

    x="克隆元素的左上角的x轴"
    y="克隆元素的左上角的y轴"
    width="克隆元素的宽度"
    height="克隆元素的高度"
    xlink:href="URI引用克隆元素"

    

  动画:animate

    这个标签是你放在哪个标签里就是哪个动
    注意:
      写在需要动画元素的中间
    attributeName="目标属性名称"
    from="起始值"
    to="结束值"
    dur="持续时间"
    repeatCount="动画时间将发生",indefinite:无限次

     

三、canvas与svg的区别

    1、svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布;

    2、svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是真和锯齿。而canvas输出标量画布,就像一张图片一样,放大会失真或者锯齿