什么是Canvas？

<canvas> 元素

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

你可以通过多种方法使用 Canvas 绘制路径、盒、圆、字符以及添加图像。

<canvas> 元素定义如下：

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

标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。

提示：了解和使用 Canvas 需要基本了解 JavaScript 的基本知识。

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)。

X 坐标向右增加。

Y 坐标向着画布底部增加。

Canvas 的使用

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

画布的使用

Canvas 元素可以被转换。

例如，在坐标 (20, 40) 的画布上写入文本。

ctx.font="bold 20px Arial";
ctx.textAlign="Hello W3Cschool";
ctx.fillText("Hello W3Cschool", 20, 40);

translate(x,y) 方法用于移动 Canvas。

x 表示水平移动网格的距离, y 表示垂直移动网格的距离。

ctx.translate(100, 150);
ctx.fillText("after translate", 20, 40);

在此例子中，画布向右移动100像素，向下移动150像素。

rotate() 方法

rotate() 方法用于旋转 HTML5 画布。

下面是在设置旋转之前和之后绘制相同矩形的例子:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10,10, 100, 100);

ctx.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.

ctx.fillStyle = "#0000FF";
ctx.fillRect(10,10, 100, 100);

运行显示结果如下图所示：

scale() 方法

scale() 方法缩放当前绘图至更大或更小。

注意：如果你对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果你设置 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

实例
绘制一个矩形；放大到2倍，再次绘制矩形；放大到2倍，再次绘制矩形；放大到2倍，再次绘制矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

运行显示结果如下图所示：

SVG 与 Canvas 的区别

SVG

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

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

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

特点：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

Canvas

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

Canvas 是逐像素进行渲染的。

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

特点：

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