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

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

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

　　　　基本语法：

　　　　　　　　　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>

　　　　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、复杂度越高渲染速度会越慢

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

发表于 2019-05-22 09:26 学前端的小小知识君阅读(…) 评论(…) 编辑收藏

刷新评论刷新页面返回顶部

本文链接：https://www.cnblogs.com/wj000/p/10903927.html

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

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

Canvas和SVG的基础知识，以及两者的区别(小白)的更多相关文章

随机推荐

热门专题

目录导航