Canvas
-
什么是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的具体使用方法和两个实例，就不再详述。请移步。。。学习记录(一)之h5_canvas
Svg:
1.什么是svg:
SVG 用于定义网络的基于矢量的图形，指可伸缩矢量图形 (Scalable Vector Graphics)，与canvas不同它使用的是 XML 格式来定义图形，因为它绘制的图像为矢量图，所以在放大或改变尺寸的情况下其图形质量不会有损失。
2.Svg的用法
1）SVG 文件可通过以下标签嵌入 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-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-5; fill-opacity:0.1;stroke-opacity:0.9"/>
代码解释：
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）rx 和 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-2"/>
代码解释：
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
- 线 <line>
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-2"/>
代码解释：
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
- 多边形 <polygon>
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-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-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
-
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
Canvas和svg比较
1.Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
1）SVG
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) 不适合游戏应用