Canvas和SVG的基础知识，以及两者的区别(小白)

　　首先我们来说一下Canvas是什么，它有什么作用以及它的知识点。

　　　　Canvas是<HTML5>的新标签，它通常用于通过脚本(也就是JavaScript)来绘制图像。但是它本身并没有绘制能力，仅仅是一个图形的容器，必须通过脚本来绘制。它一般应用在游戏开发、数据可视化、图形编辑器等。注意：IE9以下的浏览器不支持它！

　　　　基本语法：

　　　　　　<div id="huabu" width='800' height='600'></div>

　　　　　　<script>

　　　　　　　　　var huabu = document.getElementById('huabu');  //获取画布

　　　　　　　　　var huabi = huabi.getContext('2d')；  //获取画笔

　　　　　　</script>

　　　　这样我们就能开始最简单的绘制了。

　　　　接下来我们画一个最简单的原型：

　　　　　　　　huabi.beginPath();

　　　　　　　　huabi.moveTo(50,50);

　　　　　　　　huabi.arc(200,150,50,0*Math.PI/180,90*Math.PI/180,true);

　　　　　　　　huabi.fillStyle = 'red';

　　　　　　　　huabi.fill();

　　　　这样能得到一个最基本的圆。

　　　　

　　　　以下为Canvas中基础的代码和基本语法及其含义(可能会有没有涉及到的，还请自行研究)：

• beginPath()：开始一条路径，或重置当前的路径。
  • 语法：huabi.beginPath();

 

• moveTo(x,y)：绘制“已填色”的矩形。默认的填充颜色是黑色。
  • 　　语法：huabi.moveTo(x,y);

 

• lineTo(x,y)：添加一个新点，然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)
  • 　　语法：huabi.lineTo(x,y);

 

• stroke()：实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
  • 　　语法：huabi.stroke();

 

• lineJoin()：设置或返回边角的类型，当两条线交叉时
  • 　　语法：huabi.lineJoin = "round/bevel/miter"
• miter：默认绘制尖角 round：绘制圆角 bevel：绘制斜角

• arc(X,Y,Radius,startAngle,endAngle,anticlockwise)
  • 　　第一个参数：圆心X坐标
  • 　　第二个参数：圆心Y坐标
  • 　　第三个参数：绘制半径
  • 　　第四个参数: 开始绘制的角度
  • 　　第五个参数：结束绘制的角度
  • 　　第六个参数：绘制方向 true 逆时针 false 顺时针 (默认)
  • 　　语法：huabi.arc(200,150,100,0*Math.PI/180,-90*Math.PI/180,true);

• fillStyle()：设置或返回用于填充绘画的颜色、渐变或模式。(渐变需要另一个属性createLinearGradient)
  • 　　语法：huabi.fillStyle = 'red';

• fillRect()：绘制“已填色”的矩形。默认的填充颜色是黑色。
  • 　　语法：huabi.fillRect(x,y,width,height)
  • 　　x:矩形左上角的X坐标 y:矩形左上角的Y坐标 width:矩形的宽度 height:矩形的高度

• fill()：填充当前的图像（路径）。默认颜色是黑色。
  • 　　语法：huabi.fill();

• rect()：创建矩形 (无法填充颜色)
  • 　　语法：rect(x,y,width,height);
  • 　　x:矩形左上角的X坐标 y:矩形左上角的Y坐标 width:矩形的宽度 height:矩形的高度

 

• strokeRect()：绘制矩形(无填充),笔触默认颜色是黑色
  • 　　语法：strokeRect(x,y,width,height)
  • 　　x:矩形左上角的X坐标 y:矩形左上角的Y坐标 width:矩形的宽度 height:矩形的高度

• strokeStyle()：给strokeRect()绘制矩形设置边框颜色
  • 　　语法：huabi.strokeStyle = color/gradient/pattern;
  • 　　color：颜色 gradient：渐变 pattern：用于创建 pattern 笔触的 pattern 对象

• clearRect()：清空给定矩形内指定元素
  • 　　语法：huabi.clearRect(x,y,height,width);
  • 　　X:要清除矩形左上角的X坐标 y:要清除矩形左上角的Y坐标 width:要清除矩形的宽度 height:要清除矩形的高度

• globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
  • 　　源图像 = 您打算放置到画布上的绘图。 目标图像 = 您已经放置在画布上的绘图。
• 属性：
• sourcep-over：默认情况：新的图像覆盖已有图像
  • 　　语法：huabi.globalCompositeOperation = 'sourcep-over';
• destination-over：将已有的图像覆盖在新的图像上
  • 　　语法：huabi.globalCompositeOperation = 'destination-over';
• source-atop：新图像除了重合部分其余变透明
  • 　　语法：huabi.globalCompositeOperation = 'source-atop';
• destination-atop：已有图像除了重合部分其余变透明
  • 　　语法：huabi.globalCompositeOperation = 'destination-atop';
• source-in：重合部分显示，显示为新图像
  • 　　语法：huabi.globalCompositeOperation = 'source-in';
• destination-in：重合部分显示，显示为已有图像
  • 　　语法：huabi.globalCompositeOperation = 'destination-in';
• source-in：显示新图像除了重合部分外的
  • 　　语法：huabi.globalCompositeOperation = 'source-out';
• destination-out：显示已有图像除了重合部分外的
  • 　　语法：huabi.globalCompositeOperation = 'destination-out';
• lighter：重叠部分颜色叠加
  • 　　语法：huabi.globalCompositeOperation = 'lighter';
• copy：新图像把已有图像的覆盖掉(不覆盖全部已有的图像也隐藏)，已有的图像隐藏
  • 　　语法：huabi.globalCompositeOperation = 'copy';
• xor：重叠部分隐藏
  • 　　语法：huabi.globalCompositeOperation = 'xor';

• quadraticCurveTo()：二次贝赛尔曲线--通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点(二次贝塞尔曲线需要两个点，第一个点是曲线的控制点，第二个点是曲线的结束点，开始点是由moveTo控制的)
  • 　　语法：huabi.quadraticCurveTo(cpx,cpy,x,y);
  • 　　cpx:贝塞尔控制点的X坐标 cpy:贝塞尔控制点的Y坐标 x:结束点的X坐标 y:结束点的Y坐标

• bezierCurveTo()：复杂的贝塞尔曲线(三次方贝塞尔曲线)--通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点(需要三个点，第一二个为控制点，第三个为控制点)
  • 　　语法：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
  • 　　cp1x:第一个贝塞尔控制点的X坐标 cp1y:第一个贝塞尔控制点的Y坐标
  • 　　cp1x:第二个贝塞尔控制点的X坐标 cp1y:第二个贝塞尔控制点的Y坐标
  • 　　x:结束点的X坐标 y:结束点的Y坐标

• textBaseline：设置或返回在绘制文本时的当前文本基线。
  • 　　语法：huabi.textBaseLine = 'bottom';

• strokeText()：绘制空心字体
  • 　　语法：huabi.stokeText(text,x,y,maxWidth(可选))
  • 　　text：规定在画布上输出的文本 x：绘制文本相对画布的X坐标 y：绘制文本相对画布的Y坐标 maxWidth(可选)：允许文本的最大宽度

• fillText()：绘制实心字体
  • 　　语法：huabi.fillText(text,x,y,maxWidth(可选))
  • 　　text：规定在画布上输出的文本 x：绘制文本相对画布的X坐标 y：绘制文本相对画布的Y坐标 maxWidth(可选)：允许文本的最大宽度

 

• shadowColor：文本阴影颜色
  • 　　语法：huabi.shadowColor = 'red';

 

• createRadialGradient：创建线性的渐变对象。
  • 　　语法：huabi.createLinearGradient(x0,y0,x1,y1);
  • 　　x0：渐变开始点的x坐标 y0：渐变开始点的y坐标 x1：渐变结束点的x坐标 y1：渐变结束点的y坐标

• shadowOffsetX：文本X方向偏移量
  • 　　语法：huabi.shadowOffsetX = 5;

• shadowOffsetY：文本Y方向偏移量
  • 　　语法：huabi.shadowOffsetY = 5;

• shadowBlur：模糊半径值
  • 　　语法：huabi.shadowBlur = 2;

• drawImage：将图片绘制在画布中
  • 　　语法：huabi.drawImage(image,sx,sy,swidth,sheight,x,y,width,height);
  • 　　image：规定要使用的图像、画布或视频
  • 　　sx：截取在图片上的X坐标
  • 　　sy：截取在图片上的Y坐标
  • 　　swidth：截取图片的宽度
  • 　　sheight：截取图片的高度
  • 　　x：绘制图片在画布上的X坐标
  • 　　y：绘制图片在画布上的Y坐标
  • 　　width：绘制图片的宽
  • 　　height：绘制图片的高

• createPattern()：在指定的方向内重复指定的元素。
  • 　　语法：var photo = huabi.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
  • 　　image：规定要使用的图像、画布或视频
  • 　　repeat：默认。该模式在水平方向和垂直方向平铺
  • 　　no-repeat：不平铺
  • 　　repeat-x：在水平方向平铺
  • 　　repeat-y：在垂直方向平铺

• clip()：原始画布中剪切任意形状和尺寸。
  • 　　语法：huabi.clip();

　　　接下来我们说一下svg的历史，svg是什么以及它的优势？

　　　　　　SVG在2013年1月14日被确立为W3C(万维网联盟)标准。不知道W3C的可以取看一看。

　　　　　　SVG是可缩放的矢量图，白话就是图片放大多少倍图片都不会模糊。

　　　　　　SVG的优势：

• • • 　　SVG 可被非常多的工具读取和修改（比如记事本）
    • 　　SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
    • 　　SVG 是可伸缩的
    • 　　SVG 图像可在任何的分辨率下被高质量地打印
    • 　　SVG 可在图像质量不下降的情况下被放大
    • 　　SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
    • 　　SVG 可以与 Java 技术一起运行
    • 　　SVG 是开放的标准
    • 　　SVG 文件是纯粹的 XML

　　　　SVG的基本格式为：

　　　　　　<svg xmlns='https://www.w3.org/2000/svg' version='1.1'>

　　　　　　</svg>

　　　　SVG的属性：

　　　　　　

　　　　　　<!-- cx：相对于浏览器左边的距离 cy：相对于浏览器上部的距离 r：半径 fill：填充颜色 stroke：边框颜色-->

 

• circle：创建一个圆 语法：<circle cx="" cy="" r=""></circle>
• rect：创建矩形 语法：<rect height="" width=""></rect>
• ellipse：创建椭圆 语法：<ellipse cx="" cy="" rx="" ry=""></ellipse>
• line：创建线条 语法：<line x1="" y1="" x2="" y2="" ></line>
• polygon：创建多边形 语法：<polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"></polygon>
• polyline：创建折线 语法：<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" ></polyline>
• path：设定路径 语法：<path d="M250 150 L150 350 L350 350 Z"></path>
• <path d='m100 50 l200 50 m200 80 l250 100' stroke='red'></path>
  • 　　含义：开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径
  • 　　大写方法表示绝对定位 小写方法表示相对定位
• 矩形的模糊效果：
  • 　　defs：所有互联网滤镜定义在defs中
  • 　　filter：filter的id属性定义一个滤镜的唯一名称
  • 　　feGaussianblur：定义模糊效果
  • 　　in="SourceGraphic"：定义了整个图形的创建效果
  • 　　stdDeviation：定义模糊量
  • 　　rect：rect的滤镜属性用来把元素链接到w1属性
• <defs>
  • 　　<filter id="w1">
    • 　　　　<feGaussianblur in='SourceGraphic' stdDeviation='1'></feGaussianblur>
  • 　　</filter>
• </defs>
• <rect width='90' height='80' filter='url(#w1)' stroke='red' stroke-width='3'></rect>

• 克隆：相对于被克隆元素的左上角进行位移
  • 　　<rect x='50' y='50' width='100' height='30' fill='red' id="a"></rect>
  • 　　<use x='5' y='4' xlink:href='#a'></use>

• 文字居中：
  • <text stroke='blue' x='50' y='80' font-size='30' text-anchor='middle'>Hello Word</text>

　　　　最后我们在说下两者的区别

　　　　　　相同点为：它们都允许在浏览器中绘制图形，但在本质上它们是不同的。

　　　　　　CAVAS：

　　　　　　　　1、它是通过JavaScript来绘制的

　　　　　　　　2、只要它的位置发生改变，就需要重新绘制

　　　　　　　　3、它是逐像素的进行渲染

　　　　　　　　4、依赖屏幕的分辨率

　　　　　　　　5、弱的文本渲染能力

　　　　　　　　6、不支持事件处理

　　　　　　　　7、能够jpg、png图像保存

　　　　　　　　8、适合图像密集的游戏，能够重复渲染

　　　　　　SVG：

　　　　　　　　1、使用XML的2d语言

　　　　　　　　2、不依赖屏幕的分辨率

　　　　　　　　3、支持事件处理

　　　　　　　　4、适合带有大型渲染区域的应用程序

　　　　　　　　5、不适合游戏

　　　　　　　　6、复杂度越高渲染速度会越慢

　　　　以上如有写的不对的地方，还请见谅。也可联系本人