Canvas和SVG的基础知识，以及两者的区别(小白)
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>
- <filter id=”w1″>
- </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、复杂度越高渲染速度会越慢
以上如有写的不对的地方，还请见谅。也可联系本人
版权声明：本文为wj000原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。