首页澳门新葡亰官方网站 › HTML5IE浏览器宽容难题以至图像元素

HTML5IE浏览器宽容难题以至图像元素

点评:canvas 与
SVG都能够使你在浏览器中画图,但它们的基本原理不同,接下来将对canvas 与
SVG的画图原理进行介绍,感兴趣的朋友可以了解下

Canvas 与 SVG 的比较

图片 1

弱的文本渲染能力

Canvas 与 SVG 的比较

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

canvas 与 SVG都能够使你在浏览器中画图,但它们的基本原理不同。
SVG
SVG是一种在XML中描述二维图形的语言。
SVG是基于XML的,意味着在SVG
DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。
在SVG中,每一个图形被记作一个对象。如果一个SVG对象的属性发生改变,浏览器可以自动重新生成图形。

Internet Explorer 浏览器问题

Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv"
来解决该问题:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
</head>
<body>
<h1>HTML5总结</h1>
<article>
    使用shiv解决IE浏览器兼容H5问题.
</article>
</body>
</html>

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式.

canvas 是 图形容器,需要js 去绘图。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas
中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

Canvas          SVG
依赖分辨率      独立于分辨率
不支持事件处理器 支持事件处理器
弱文本渲染能力 最适合具有大渲染面积的应用(谷歌地图)
可以保存最终图片为PNG或者JPG 复杂图像,重画变慢(任何使用DOM很多的情况都会变慢)
最适合许多 对象频繁重画的图形游戏        不适合游戏应用

图像元素

Canvas

1.定义:用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
< canvas> 标签只是图形容器,您必须使用脚本来绘制图形.

2.使用JS绘制图像:
canvas本身没有绘图能力,所有绘图工作必须由js完成.

3.示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <!-- 导入shiv -->
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
</head>

<body>
<canvas id="mCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var mCan = document.getElementById("mCanvas");
    var ctx =mCanc.getContext("2d");
    ctx.font = "30px Arial";
    ctx.strokeText("Hello World", 10, 50);
</script>

</body>
</html>

SVG

1.定义:

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

2.优势:

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

3.示例:

<!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>

SVG教程

支持事件处理器


Canvas
Canvas能够在fly上画2D图形(使用JS)
Canvas能够按照像素重新生成。

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

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

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

SVG

 

Canvas 和SVG的比较
下表显示了canvas与SVG的主要不同点:

最适合图像密集型的游戏,其中的许多对象会被频繁重绘

在Canvas中,一旦图形完成,就会被浏览器忘记。如果图形位置要发生改变,那么整个屏幕需要重画,包括图形覆盖的对象。

Canvas

这个说实话,我只用过canvas画过一些简单的图形,复杂的不懂,之所以列出来,是因为之前在面试中有被问到,在这里mark一下,后期深化。

SVG


转载本站文章请注明出处:澳门新葡亰官方网站 http://www.radioritmo-bl.com/?p=487

上一篇:

下一篇:

相关文章