文档介绍：canvas变换
变换操作并不限于缩放和平移,(angle)来旋转图像,甚至可以直接修改底层变换矩阵以完成一些高级操作,如剪裁图像的绘制路径。如:(),旋转角度参数以弧度为单位。
beginPath():开始
moveTo(x,y):起点坐标
o(x,y):目标坐标
closePath():连接起点,闭合路径
translate():移动
rotate():旋转
restore():恢复
scale():缩放
save():保存
rotate(angle):旋转图像
urveTo():绘制曲线
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:高斯模糊值,值越大,阴影越模糊
HTML5资料
Canvas教程
<canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素。例如,他可以用于绘图、制作图片的组合或者简单的动画(当然并不那么简单)。It can for instance be used to draw graphs, make positions or do simple (and not so simple) animations.
基本用法
Basic usage
 <canvas>元素
Let's start this tutorial by looking at the <canvas> element itself. 
让我们从<canvas>元素的定义开始吧。
<canvas id="tutorial" width="150" height="150"></canvas>
This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. <canvas>看起来很像<img>,唯一不同就是它不含 src 和 alt 属性。The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties or CSS ,width 和 height,两个都是可选的,并且都可以 DOM 或者 CSS 来设置。 When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.
如果不指定width 和 height,默认的是宽300像素,高150像素。The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.   (If your  renderings seem distorted, try specifying your width and height attributes explic