Canvas和SVG

什么是Canvas？

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

通过JavaScript来绘制

canvas元素本身是没有绘图能力的，所有的绘制工作都必须在JavaScript中完成，getContext（）方法可以返回一个对象，提供了用于在画布上绘图的方法的属性，例如：绘制路径、矩形、圆形、字符以及添加图像。

<script type="text/javascript">
var c=document.getElementById("chen");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素:

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

然后，创建 context 2d对象：

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

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

Canvas 与 SVG 的比较

Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用