Canvas和svg总结比较

Canvas

基本用法

getContext()

描边和填充

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

绘制矩形

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

绘制路径

beginPath():开始绘制路径
arc(x, y, radius, startAngle, endAngle, counterclockwise):以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束角度(用弧度表示)分别为startAngleendAngle。最后一个参数表示startAngleendAngle是否按逆时针方向计算,值为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”和”center”。
建议使用”start”和”end”,不要使用”left”和”right”,因为前两者的意思更稳妥,能同时
适合从左到右和从右到左显示(阅读)的语言。
textBaseline:表示文本的基线。可能的值有”top”、”hanging”、”middle”、”alphabetic”、
“ideographic”和”bottom”。

变换

rotate(angle):围绕原点旋转图像angle弧度。
scale(scaleX, scaleY):缩放图像,在x方向乘以scaleX,在y方向乘以scaleYscaleXscaleY的默认值都是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()

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

WebGL

参考文献

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