H5_canvas与svg

Posted 1234wu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5_canvas与svg相关的知识,希望对你有一定的参考价值。

Canvas

  1. 什么是canvas:

html5 canvas 元素使用 javascript 在网页上绘制图像,canvas 元素本身是没有绘图能力的所有的绘制工作必须在 JavaScript 内部完成它会在网页中绘制一个画布,画布是一个矩形区域,可以控制到画布的每一像素,绘制各种图像。它提供多种绘制路径、矩形、圆形、字符以及添加图像的方法。

  2.Canvas的用法:

  1) 创建 Canvas 元素

     HTML5 页面添加 canvas 元素,规定元素的 id、宽度和高度;(canvas的样式要写在行内样式中,否则不会生效)

<canvas id="myCanvas" width="200" height="100"></canvas>

   2) 如何通过 JavaScript 来绘制:

    eg:通过js获取canvas元素 ,getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,可以理解为绘图工具。创建绘图工具(ctx),通过绘图工具在画布中绘制矩形,并在绘制前为其添加填充样式:

  

<script type="text/javascript">

     var c=document.getElementById("myCanvas");

    var cxt=c.getContext("2d");

    cxt.fillStyle="#FF0000";

    cxt.fillRect(0,0,150,75);

</script>

 

   3)绘制的坐标:

  Canvas绘制图像的参考原点为左上角。也就是画布的(0,0)点为画布的左上角,向左x轴坐标增加,向下y坐标增加。超出画布的部分将不会显示。

 

  3.Canvas的常用一些方法:

    之前写过关于canvas的具体使用方法和两个实例,就不再详述。请移步。。。https://www.cnblogs.com/1234wu/p/10098905.html


 

Svg:

  1.什么是svg:

      SVG 用于定义网络的基于矢量的图形指可伸缩矢量图形 (Scalable Vector Graphics),canvas不同它使用的是 XML 格式定义图形,因为它绘制的图像为矢量图,所以在放大或改变尺寸的情况下其图形质量不会有损失

 

  2.Svg的用法

   1SVG 文件可通过以下标签嵌入 HTML 文档:<embed><object> 或者 <iframe>

      <embed><object>会有版本和规范问题,<iframe> 标签可工作在大部分的浏览器中。所以我们一般使用<iframe>标签引入就可以了。

语法

<iframe src="rect.svg" width="300" height="100">

</iframe>

 

 但在 HTML5 中,能够将 SVG 元素直接嵌入 HTML 页面中:

  实例

  xmlns为名命空间,polygon为创建了一个多边形图片,style则负责设置图片的样式;

<!DOCTYPE html>

<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

  <polygon points="100,10 40,180 190,60 10,60 160,180"

  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

</body>

</html>

 

 

  2)一些预定义的形状元素,可被开发者使用和操作:

  • 矩形 <rect>
<rect x="20" y="20" width="250" rx="20" ry="20"

 height="250"

style="fill:blue;stroke:pink;stroke-width:5;

fill-opacity:0.1;stroke-opacity:0.9"/>

 

代码解释:

x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px

y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0pxrx ry 属性可使矩形产生圆角。

CSS fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1

CSS stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1

 

  • 圆形 <circle>
<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red"/>

  代码解释:

cx cy 属性定义圆点的 x y 坐标。如果省略 cx cy,圆的中心会被设置为 (0, 0)

r 属性定义圆的半径。

 

  • 椭圆 <ellipse>
<ellipse cx="300" cy="150" rx="200" ry="80"

style="fill:rgb(200,100,50);

stroke:rgb(0,0,100);stroke-width:2"/>

代码解释:

cx 属性定义圆点的 x 坐标

cy 属性定义圆点的 y 坐标

rx 属性定义水平半径

ry 属性定义垂直半径

 

  • 线 <line>
<line x1="0" y1="0" x2="300" y2="300"

style="stroke:rgb(99,99,99);stroke-width:2"/>

代码解释:

x1 属性在 x 轴定义线条的开始

y1 属性在 y 轴定义线条的开始

x2 属性在 x 轴定义线条的结束

y2 属性在 y 轴定义线条的结束

 

 

  • 多边形 <polygon>
<polygon points="220,100 300,210 170,250"

style="fill:#cccccc;

stroke:#000000;stroke-width:1"/>

代码解释:

points 属性定义多边形每个角的 x y 坐标

 

  • 折线 <polyline>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>

 

 

  • 路径 <path>
<path d="M250 150 L150 350 L350 350 Z" />

代码解释:

上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。

<path> 标签用来定义路径。

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

    • M = moveto

    • L = lineto

    • H = horizontal lineto

    • V = vertical lineto

    • C = curveto

    • S = smooth curveto

    • Q = quadratic Belzier curve

    • T = smooth quadratic Belzier curveto

    • A = elliptical Arc

    • Z = closepath

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

 


 

Canvassvg比较

1.Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。

  1SVG

  SVG 是一种使用 XML 描述 2D 图形的语言。 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

  2)Canvas

  Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

2.Canvas SVG 不同之处

1)Canvas

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

2)SVG

1不依赖分辨率

2支持事件处理器

3最适合带有大型渲染区域的应用程序(比如谷歌地图)

4复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

5) 不适合游戏应用

 

以上是关于H5_canvas与svg的主要内容,如果未能解决你的问题,请参考以下文章

前端开发常用代码片段(中篇)

可从 HTML 拖放到 SVG 上

用php下载一个svg

text 使用SVG的片段

在PaddlePaddle中的Notebook代码片段

通过 webapp 提供时,SVG 片段标识符在 Safari 中被交换