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)
:直接修改变换矩阵,方式是乘以如下矩阵。
123 | m1_1 m1_2 dxm2_1 m2_2 dy0 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