canvas和SVG的区别：
canvas使用它提供的方法来绘图，绘图API简洁。
SVG通过构建XML元素数绘图，对元素编辑方便，但语法复杂。
个人理解：差别就像使用OpenGl绘制一帧画面和使用HTML类似的感觉，一个提供API，一个是用一种语法体系来实现。
canvas的API大部分定义在 " 绘制上下文 " 对象上，提供getContext方法获取改对象。
首先，使用canvas绘制图形，必需指定在哪个canvas中绘制图形，然后，绘制图形的元素的width和height都必需显式指明（我猜在底层可能是用类似element.style.width类似的api来获取canvas高度与宽度的）（canvas的高宽是画布大小，css设置的高宽是屏显大小），否则canvas无法绘制，即在css的style中，设置元素的高度和宽度会影响元素的显示效果，但如果仅在此设置，则无法绘图。
比如，下面的例子：
黄色的是仅仅指定了width="30" height="30" 的效果，红色的所在的canvas被css指定为200px高、宽，可以看到，图形被放大了。我们可以得出结论，是绘制完成后进行的放大，因为图形较模糊。fillRect根据 width和height作为参考进行绘图，绘制完成后，图像被拉伸填充满css所指定的canvas区域。
绘制图像的流程为：
1、获取canvas元素
2、获取canvas元素的上下文对象（有两种，参数分别是2d和webgl）
3、设置参数（这个过程可以理解为画笔、路径准备阶段）
4、进行绘制（绘制的图形会在屏幕上显示出来）
点的坐标 》 一个CSS像素 》一个或多个设备像素
CanvasRenderingContext2D.createLinearGradient
参数为两个点的坐标
在下图中，设置两个点分别为（0，0） （300，300）
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var bgfade = c.createLinearGradient(0,0,300,300);
bgfade.addColorStop(0.0, "rgb(0,0,0)");
bgfade.addColorStop(1.0, "#fff");
c.fillStyle = bgfade;
c.fillRect(0,0,300,300);`
可以看出，虚线所在位置的颜色是相同的，颜色的渐变方向是按照实线箭头的方向渐变的。
CanvasRenderingContext2D .createRadialGradient(x0,y0,r0,x1,y1,r1):
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |
之后通过CanvasGradient.addColorStop来定义渐变色，其参数为 位置（0~1）、颜色
在定义了CanvasGradient对象之后，渐变效果已经完成了，在每个位置的渐变色已经确定，之后调用fill或storke之类的方法，只是确定显示的范围。
fillRect 和 strokeRect
两者都是画一个矩形。
fillRect 是画一个填充矩形， strokeRect 是画一个描边矩形。
fillRect 使用fillStyle来填充矩形内部。
strokeRect 使用 strokeStyle来对矩形的边缘进行描色。
案例：
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
c.fillStyle = "green"; // Start with the linear gradient
c.fillRect(0,0,100,100); // Fill the entire canvas
c.strokeStyle = "red";
c.lineWidth = 20;
c.strokeRect(110,110,100,100);
fillText()和 strokeText()
两者都是绘制文本的方法。不同之处和上面的两个方法类似。
参数都是： 文本内容、一个点坐标
textAlign：文本应当参照 X 轴坐标如何进行水平对齐
- 可能取值：
start、left、center、right、end
textBaseline：文本应当参照 Y 轴坐标如何进行垂直对齐
- 可能取值：
top、hanging、middle、alphabetic、ideographic、bottom
图片来自JavaScript权威指南
默认值是：textAlign - start textBaseline - alphabetic
理解：textAlign决定了文本相对于起始点应该处于水平什么位置。
假设O为传入的坐标点，则
start：文本相对于O点的水平位置如绿线所示，即以O点所在的X坐标作为文本的X的开始值：
textBaseline决定了文本相对于起始点应该处于垂直方向的位置。
alphabetic：文本相对于O点的垂直位置如黄虚线所示，即以O点所在的Y坐标作为文本的Y的开始值：
总结：当传入的参考点不改变的情况下，当我们改变textBaseline的值，文本会左右移动。当我们改变textBaseline的值，文本会上下移动。我们可以直观的理解为它们的值就是参考点相对于文本所处的位置。
fillText方法的第4个可选参数决定了渲染文本最大的宽度：
在默认不设置如何参数情况下，当文本所用宽度超过这个值时，它会把文本压缩到所设置的值。
网友评论