HTML笔记（8）

1：HTML5 Canvas

canvas元素用于在网页上绘制 图形。

1：什么是canvas

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图形的方法。

2：创建Canvas元素

向HTML5页面添加canvas元素。

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

3：通过JavaScript来绘制

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

<script type="text/javascript">
var c=document.getElementById("myCanvas");//使用id来寻找canvas元素
var cxt=c.getContext("2d");//创建contest对象
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

2：HTML5内联SVG

1：什么是SVG

1：SVG指可伸缩矢量图形。

2：SVG用于定义网络的基于矢量的图形。

3：SVG使用XML格式定义图形。

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

5：SVG是万维网联盟的标准。

2：SVG的优势

与其他图像格式相比，使用SVG的优势在于：

1：SVG图像可通过文本编辑器来创建和修改。

2：SVG图像可被搜、索引、脚本化或压缩。

3：SVG是可伸缩。 

4：SVG图像可在任何的分辨率下被高质量的打印。

5：SVG可在图像质量不下降的情况下被放大。

3：把SVG直接嵌入HTML页面

在HTML5中，您能够将SVG元素直接嵌入HTML页面中。

3：Canvas  VS SVG

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

1：SVG

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

SVG基于XML，这意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。

在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

2：Canvas

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

Canvas是逐像素进行渲染的。

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

3：Canvas与SVG的比较

Canvas：

1：依赖分辨率

2：不支持事件处理器

3：弱的文本渲染能力

4：能够以,png或,jpg格式保存结果图像

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

SVG：

1：不依赖分辨率

2：支持事件处理器

3：最适合带有大型渲染区域的应用程序

4：复杂度高绘减慢渲染速度

5：不适合游戏应用。