思享工具箱

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

摘要：
首先，我们来谈谈Canvas是什么，它做什么以及它的知识点。画布是的新标签，通常用于通过脚本绘制图像。以下是Canvas中的基本代码、基本语法及其含义：beginPath（）：启动路径或重置当前路径。

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

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

　　　　基本语法：

　　　　　　<div 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坐标 矩形的宽度 height:矩形的高度

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

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

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

  • clearRect()：清空给定矩形内指定元素
    • 　　语法：huabi.clearRect(x,y,height,width);
    • 　　X:要清除矩形左上角的X坐标 y:要清除矩形左上角的Y坐标 要清除矩形的宽度 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-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 filter='url(#w1)' stroke='red' stroke-width='3'></rect>
  • 克隆：相对于被克隆元素的左上角进行位移
    • 　　<rect x='50' y='50' fill='red' id="a"></rect>
    • 　　<use x='5' y='4' xlink:href='https://tool.4xseo.com/article/244423.html'></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、复杂度越高渲染速度会越慢

　　　　以上如有写的不对的地方，还请告知！！！

　　　　　　　　

标签：#svg#canvas#rect | 浏览：257 | 发布日期：

免责声明：文章转载自《Canvas和SVG区别(小白)，以及两者的基础知识点》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Qwt 编译 配置 使用C#如何获取其他程序ListView控件中的内容下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

[ PyQt入门教程 ] Qt Designer工具的使用

Qt Designer是PyQt程序UI界面的实现工具，使用Qt Designer可以拖拽、点击完成GUI界面设计，并且设计完成的.ui程序可以转换成.py文件供python程序调用。本文主要通过用户登录需求描述Qt Designer工具开发界面的使用方法。 本文主要内容1、Qt Designer程序主界面窗口介绍。 2、Qt Designer程序实现界面...

扩展WinForm的ComboBox

个人认为winform的combobox不是那么的好用，所以自己扩展了一下。重新定义Items属性，并且支持树结构。为每项加入了CheckBox状态。丰富的列表项类ListItem。效果如图：代码清单： {[Designer(typeof(ControlDesigner))]publicclassComboBox:System.Windows.Forms....

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw ca...

【重点突破】——使用Canvas进行绘图图像

一、引言 本文主要是canvas绘图中绘制图像的部分，做了几个练习，综合起来，复习canvas绘图以及定时器的使用。 二、canvas绘制小飞机在指定位置 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti...

Android 设置SeekBar不可拖动

public class MyProgressBar extends SeekBar { /** * 是否支持拖动进度 */ private boolean touch = true; public MyProgressBar(Context context, AttributeSet attrs) {...

H5_0009：关于HTML5中Canvas的宽、高设置问题

关于HTML5中Canvas的宽、高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸)： 方法一：        <canvas  height="500"></canvas> 方法二：使用HTML5 Canvas API操作 OK        var canvas...

最新文章

随机推荐

思享工具箱导航