首页 > 其他 > 详细

canvas和svg及区别

时间:2019-05-21 20:44:40      阅读:108      评论:0      收藏:0      [点我收藏+]

一,canvas画布···位图

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

    默认情况下 <canvas> 元素没有边框和内容。

    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

    * 不要在style中给canvas设置宽高 会有位移差

二,svg···矢量图

  SVG 是使用 XML 来描述二维图形和绘图程序的语言

  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

  SVG 用来定义用于网络的基于矢量的图形

  SVG 使用 XML 格式定义图形

  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

  SVG 是万维网联盟的标准

  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

  SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> ---这是根元素

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

  SVG如果不设置大小,默认占用面积300*150

canvas实例:

  1, 首先,找到 <canvas> 元素:

    var c1=document.getElementById(‘c1‘)

  2, 然后,创建 context 对象:

    var ctx=c1.getContext("2d");

 

  ------------------------------------------------------------------------------------------

  使用 JavaScript 来绘制图像

    * fillStyle() CSS颜色,渐变,或图案--- 默认设置是#000000(黑色)

    * fillRect(x,y,width,height) 方法定义了矩形当前的填充方式

    * strokeRect() 绘制带边框的方块

  ------------------------------------------------------------------------------------------

  Canvas - 路径

    画线-

      * moveTo(x,y) 定义线条开始坐标

      * lineTo(x,y) 定义线条结束坐标

      * stroke() 方法来绘制线条:

  ------------------------------------------------------------------------------------------

  rect() 绘制方块 没有颜色背景线条

  clearRect(X,Y,width,height) 清除画布

  一对方法:意思开始结尾写了里面的方法只对当前有效果

    save() 保存当前环境的状态。

    restore() 返回之前保存过的路径状态和属性。

  ------------------------------------------------------------------------------------------

  Canvas - 路径

    画圆- 

      * arc(x,y,半径,起始弧度,结束弧度,旋转方向) ----弧的圆形的三点钟位置是 0 度

        x,y 圆的中心的 x y坐标。

        起始弧度,结束弧度 以弧度计

        弧度和角度的关系:弧度 = 角度*Math.PI/180

        Math.PI=180°

        2*Math.PI=360°  

        旋转方向:顺时针(默认:false),逆时针(true)

      * beginPath() 绘画开始

      * closePath() 绘画结束

      * stroke() 绘制线条,定义路径

  ------------------------------------------------------------------------------------------

  画布的平移和旋转

    translate(x轴偏移,y轴偏移) 平移,画布的大小位置不变 起始坐标变了

    rotate(参数为弧度) 画布的旋转都是以(0,0)中心点旋转

    scale() 缩放 ---就是将画布向后移动,跟人的视距就变远了,近大远小

  ------------------------------------------------------------------------------------------

  画布中插入图片:

    * drawImage(image,x,y) 把一幅图像放置到画布上

  ------------------------------------------------------------------------------------------

  插入文字 :

    * font - 定义字体

    * fillText(text,x,y) - 在 canvas 上绘制实心的文本

    * strokeText(text,x,y) - 在 canvas 上绘制空心的文本

svg实例

  <rect> 定义一个矩形 

      x="矩形的左上角的x轴"

      y="矩形的左上角的y轴"

      rx="x轴的半径(round元素)"

      ry="y轴的半径(round元素)" 

      width="矩形的宽度" 必需的

      height="矩形的高度" 必需的

      fill-opacity 只改变填充的透明度

      opacity 改变整体透明度  

   <circle> 定义一个圆 

       cx="圆的x轴坐标"

       cy="圆的y轴坐标"

       r="圆的半径" 必需


   <ellipse> 定义一个椭圆

       cx="椭圆x轴坐标"

       cy="椭圆y轴坐标"

       rx="沿x轴椭圆形的半径"。必需。

       ry="沿y轴长椭圆形的半径"。必需。

   <line> 定义一条线

      x1="直线起始点x坐标"

      y1="直线起始点y坐标"

      x2="直线终点x坐标"

      y2="直线终点y坐标"

   <polygon> 定义一个包含至少三边图形

        points="多边形的点。点的总数必须是偶数"。必需的。

        fill-rule="FillStroke演示属性的部分"

   <polyline> 定义只有直线组成的任意形状

        points=折线上的"点"。必需的。

   <path> 定义一个路径

      d="定义路径指令" 大写表示绝对定位,小写表示相对定位。

      pathLength="如果存在,路径将进行缩放,以便计算各点相当于此值的路径长度"

      transform="转换列表"

      下面的命令可用于路径数据:

          M = moveto 开始坐标

          L = lineto 结束坐标

          H = horizontal lineto 沿着x轴移动一段位置

          V = vertical lineto y 沿着y轴移动一段位置

          Z = closepath 关闭路径

          A = elliptical Arc 跟七个值

            A命令:

              X半径 

              Y半径 

              角度 ---针对椭圆

              弧长 ---1表示大角度弧线,0为小角度弧线

              方向 ---1为顺时针,0为逆时针

              X 终点坐标

              Y 终点坐标

    <g> 用于把相关元素进行组合的容器元素

      g身上的属性,子元素都会继承,但是g上的属性都必须是显现属性,不是svg元素私有的;

      id="该组的名称"

      fill="该组填充颜色"

      opacity="该组不透明度"

    <text> 定义一个文本
       X 字体对于X的值,在字体的左下角

       Y 字体对于Y的值

       text-anchor=“middle” 居中

 

    <image> 定义图像

        x="图像的左上角的x轴坐标"

        y="图像的左上角的y轴坐标"

        width="图像的宽度". 必须.

        height="图像的高度". 必须.

        xlink:href="图像的路径". 必须.

    <use> 用于复制元素XY

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

       使用URI引用一个<G>,<svg>或其他具有一个唯一的ID属性和重复的图形元素。

       复制的是原始的元素,因此文件中的原始存在只是一个参考。原始影响到所有副本的任何改变。

       x="克隆元素的左上角的x轴"

       y="克隆元素的左上角的y轴"

       width="克隆元素的宽度"

       height="克隆元素的高度"

       xlink:href="URI引用克隆元素"


    
<animate> 随时间动态改变属性

         attributeName="目标属性名称"

         from="起始值"

         to="结束值"

         dur="持续时间"

         repeatCount="动画时间将发生" indefinite 无限次

    transform 准换svg中的一个属性,translate rotate scale

      平移,旋转,都是以起点(0,0)svg的左上角为参考点;

      css3中以元素的中心点为参考点

Canvas 与 SVG 的比较

  下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

 

canvas和svg及区别

原文:https://www.cnblogs.com/xiaotaiyangye/p/10901884.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!