Canvas和svg总结比较

Canvas

基本用法

getContext()

描边和填充

strokeStyle：设置描边样式
fillStyle：设置填充样式
stroke()：描边
fill()：填充

绘制矩形

fillRect()：填充矩形
strokeRect()：描边矩形
clearRect()：清除画布矩形区域

绘制路径

beginPath()：开始绘制路径
arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针方向计算。
arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius穿过(x1,y1)。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为
止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
moveTo(x, y)：将绘图游标移动到(x,y)，不画线。
如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法。另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。

绘制文本

绘制文本主要有两个方法：fillText()和strokeText()。这两个方法都可以接收 4 个参数：要绘制的文本字符串、 x 坐标、 y 坐标和可选的最大像素宽度。
这两个方法都以下列 3 个属性为基础:
font：表示文本样式、大小及字体，用 CSS 中指定字体的格式来指定，例如”10px Arial”。
textAlign：表示文本对齐方式。可能的值有”start”、”end”、”left”、”right”和”cente 大专栏  Canvas和svg总结比较r”。
建议使用”start”和”end”，不要使用”left”和”right”，因为前两者的意思更稳妥，能同时
适合从左到右和从右到左显示（阅读）的语言。
textBaseline：表示文本的基线。可能的值有”top”、”hanging”、”middle”、”alphabetic”、
“ideographic”和”bottom”。

变换

rotate(angle)：围绕原点旋转图像angle弧度。
scale(scaleX, scaleY)：缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。scaleX和scaleY的默认值都是1.0。
translate(x, y)：将坐标原点移动到(x,y)。执行这个变换之后， 坐标(0,0)会变成之前由(x,y)表示的点。
transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改变换矩阵，方式是乘以如下矩阵。

1 2 3

m1_1 m1_2 dx m2_1 m2_2 dy 0 0 1

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：将变换矩阵重置为默认状态，然后再调用 transform()。

无论是刚才执行的变换，还是fillStyle、strokeStyle等属性，都会在当前上下文中一直有效，除非再对上下文进行什么修改。虽然没有什么办法把上下文中的一切都重置回默认值，但有两个方法可以跟踪上下文的状态变化。
如果你知道将来还要返回某组属性与变换的组合，可以调用save()方法。调用这个方法后，当时的所有设置都会进入一个栈结构，得以妥善保管。
然后可以对上下文进行其他修改。
等想要回到之前保存的设置时，可以调用restore()方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。
连续调用save()可以把更多设置保存到栈结构中，之后再连续调用restore()则可以一级一级返回。

WebGL

参考文献

• Canvas
• Javascript高级程序编程第三版–使用Canvas绘图p445