变换操作并不限于缩放和平移,我们可以使用函数context.rotate(angle)来旋转图像,甚至可以直接修改底层变换矩阵以完成一些高级操作,如剪裁图像的绘制路径。如:context.rotate(1.57),旋转角度参数以弧度为单位。
beginPath():开始
moveTo(x,y):起点坐标
lineTo(x,y):目标坐标
closePath():连接起点,闭合路径
translate():移动
rotate():旋转
restore():恢复
scale():缩放
save():保存
rotate(angle):旋转图像
quadraticCurveTo():绘制曲线
stroke():绘制
strokeText():描绘文本轮廓
strokeStyle():颜色设置
strokeRect():使用当前的storke style来绘制一个矩形,而只绘制矩形的边缘。
fill:填充
fillRect():绘制一个矩形,并以当前的fillStyle来填充
fillStyle():样式填充
fillText:填充文本内容
drawIamge():图片填充
createPattern():使用背景图片填充
addColorStop():渐变填充
createRadialGradient():放射性渐变
clearRect():清除指定矩形区域的像素
.lineCap(butt | square | round):指定线条末端的样式
.fillStyle:设置为CSS颜色、一个图案或一种颜色渐变
.lineWidth:线条宽度设置
.lineJoin(round):修改当前形状中线段的连接方式,让拐角变得更圆滑
.shadowColor:任何css中的颜色值,可以使用透明度(alpha)
.shadowOffsetX:像素值,值为正数,向右移动阴影;值为负数,向左移动阴影
.shadowOffsetY:像素值,值为正数,向下移动阴影;值为负数,向上移动阴影
.shadowBlur:高斯模糊值,值越大,阴影越模糊
CanvasRenderingContext2D 对象的方法
方法 | 描述 |
用一个中心点和半径,为一个画布的当前子路径添加一条弧线。 | |
使用目标点和一个半径,为当前的子路径添加一条弧线。 | |
开始一个画布中的一条新路径(或者子路径的一个集合)。 | |
为当前的子路径添加一个三次贝塞尔曲线。 | |
在一个画布的一个矩形区域中清除掉像素。 | |
使用当前路径作为连续绘制操作的剪切区域。 | |
如果当前子路径是打开的,就关闭它。 | |
返回代表线性颜色渐变的一个 CanvasGradient 对象。 | |
返回代表贴图图像的一个 CanvasPattern 对象。 | |
返回代表放射颜色渐变的一个 CanvasGradient 对象。 | |
绘制一幅图像。 | |
使用指定颜色、渐变或模式来绘制或填充当前路径的内部。 | |
绘制或填充一个矩形。 | |
为当前的子路径添加一条直线线段。 | |
设置当前位置并开始一条新的子路径。 | |
为当前路径添加一条贝塞尔曲线。 | |
为当前路径添加一条矩形子路径。 | |
为画布重置为最近保存的图像状态。 | |
旋转画布。 | |
保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。 | |
标注画布的用户坐标系统。 | |
沿着当前路径绘制或画一条直线。 | |
绘制(但不填充)一个矩形。 | |
转换画布的用户坐标系统。 |