CSS3--canvas

canvas

/*
如果不记得属性了，就直接去控制台打出来看。
(先在html中创建一个id为canvas的元素:
<canvas id='canvas' width='600' height='400'></canvas>
*/
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
console.log(c);

属性

/*
fillStyle //填充的颜色、渐变、图案等样式
font //字体
globalAlpha //绘制像素时添加的透明度
globalCompositeOperation //如何合并新的像素点与下面的像素点
lineCap //线末端渲染方式
lineJoin //顶点渲染方式
lineWidth //外框线宽度
miterLimit //斜接顶点的最大长度
textAlign //文本水平对齐方式
textBaseline //文本垂直对齐方式
shadowBlur //阴影模糊度
shadowColor //下拉阴影颜色
shadowOffsetX //阴影水平偏移量
shadowOffsetY //阴影垂直偏移量
strokeStyle //描边时的颜色，渐变，图案等样式

*/

方法

c.arc(x,y,r,start,end,timeClock)
/*圆心点坐标x,y,半径r，起始角度start，结束角度end，
方向（顺/逆时针）默认值：false顺时针*/
c.arcTo(x1,y1,x2,y2,angle);
//似懂非懂，貌似两条直线组成的夹角的内切圆。
//用来画圆角矩形那种不错。 自己实践看效果吧o(╯□╰)o 

c.beginPath(); //开始新路径
c.closePath(); //结束当前路径

c.clearRect(x,y,w,h);
//从(x,y)点清除画布上一个宽w，高h的矩形区域。

c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
//cp1 cp2 两个控制点的坐标，x,y 终点坐标
//从起点到终点画线，路径上添加2个控制点。
c.quadraticCurveTo(cpx,cpy,x,y)
//cpx cpy 控制点cp的x,y坐标。  x,y终点的坐标
//方法类似bezierCurveTo，但只有一个控制点

c.fill() //填充
c.fillRect(x,y,w,h) 
//从点x,y起，填充一个宽w，高h的矩形区域
c.fillText()
//填充文本



c.clip()
c.createImageData()
c.createLinearGradient()
c.createPatten()
c.createRadialGradient()
c.drawFocusIfNeeded()
c.drawImage()
c.ellipse()
c.getContextAttributes()
c.getImageData()
c.getLineDash()
c.isPointInPath()
c.isPointInStroke()

c.moveTo(x,y) //移动到(x,y)点
c.lineTo(x,y) //从某个点画线到(x,y)点

c.measureText() //测量文本 返回包含一个对象，该对象包含以像素计的指定字体宽度。
//c.measureText('string').width;

c.putImageData()
c.rect(x,y,w,h) //从点x,y起，画一个宽w，高h的矩形区域，不填充或描边看不到

c.resetTransform()
c.restore() //恢复至保存的点 （游戏读档重玩）
c.save() //保存当前变换， （游戏存档）
c.setLineDash()
c.setTransform()
c.strokeRect() //描边矩形
c.strokeText() //描边文本
c.transform()
c.translate() //位移
c.rotate() //旋转
c.scale() //缩放

待完善