canvas.getContext('2d') 返回canvas 的上下文
var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d') canvas.width = 1140 设置canvas元素的宽 canvas.height = 1400 设置canvas元素的高
ctx.rect(x, y, width, height)
方法创建一个矩形路径，其起始点位于 (x, y)，大小由 width 和 height 指定 x: 矩形起始点的 x 轴坐标。 y: 矩形起始点的 y 轴坐标 width 矩形的宽度。正值向右延伸，负值向左延伸。 height 矩形的高度。正值向下延伸，负值向上延伸。
ctx.fillStyle = '#ffffff' 设置画布样式
指定用于形状内部的颜色、渐变或图案
ctx.fill() 填充画布样式
ctx.font = 'bold 26px Arial' 设置画布文字样式
ctx.measureText(text)
返回被测量文本的信息 例如宽度 ctx.measureText(text).width
ctx.fillText() 生成文本
text: 要作为渲染上下文的文本字符串 x:开始绘制文本的点的 X 轴坐标，单位为像素 y:开始绘制文本的基线的 Y 轴坐标，单位为像素 maxWidth: 文本渲染后的最大像素宽度
ctx.drawImage() 绘制图片
image: 要绘制的图片 sx：从图片的x轴坐标开始绘制 sy：从图片的y轴坐标开始绘制 sWidth：截取图片的宽度 sHeight：截取图片的高度 dx：在画布上的x轴位置 dy：在画布上的y轴位置 dWidth：绘制图片的宽度 dHeight：绘制图片的高度
save() 保持当前状态
ctx.restore() 恢复状态
ctx.rotate(angle) 在变换矩阵中增加旋转
ctx.rotate(-Math.PI / 4): 绘制倾斜字体
ctx.translate(x, y) 添加平移变换。
x： 在水平方向上移动的距离。正值向右移动，负值向左移动。 y：在垂直方向上移动的距离。正值向右移动，负值向左移动。
