HTML5 Canvas 绘图

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

context.moveTo(x,y); //起点
context.lineTo(x,y); //连线到终点

context.beginPath();
context.closePath();

context.lineWidth //定义线条宽度
context.strokeStyle //定义线条颜色
context.fillStyle //填充颜色context.stroke(); //绘制线条
context.fill(); //绘制填充的颜色块

context.arc(
centerx, centery, radius, //圆心坐标(x,y)以及半径r
startingAngle, endingAngle, //开始的弧度值，和结束的弧度值
anticlockwise = false //可选参数，（false顺时针绘制）还是（true逆时针绘制）
)

context.rect(x, y, width, height); //设置矩形状态
context.fill();
context.stroke();
//或者
context.fillRect(x, y, width, height); //绘制填充的矩形
context.strokeRect(x, y, width, height); //绘制边框的矩形

#FFF
#333
rgb(255,128,0)
rgba(100,100,100,0.8)
hsl(20,62%,28%)
hsla(40,83%,33%,0.6)
red

butt(default) //默认缺省
round //圆头
square //方头context.lineCap = "round";

miter(default) //尖角
bevel //斜接
round //圆角context.lineJoin = "round";
//当尖角很尖锐时，会出现lineJoin为bevel
//此时跟另外一个属性有关：miterLimit，默认值是10
//当在lineJoin为miter情况下，miterLimit大于10时，lineJoin会自动变成bevel

位移：translate(x,y);
旋转：rotate(deg);
缩放：scale(sx,sy);//保存当前图形状态:
context.save();
//恢复图形的所有状态：
context.restore();
//使用：
context.save();
context.translate(x,y);
context.restore();

a c e
b d f
0 0 1
a水平缩放(1)
b水平倾斜(0)
c垂直倾斜(0)
d垂直缩放(1)
e水平位移(0)
f垂直位移(0)
即：默认时，该变换矩阵为单位阵//设置变换矩阵
transform(a,b,c,d,e,f);
//重置变换矩阵
setTransform(a,b,c,d,e,f);

var grd = context.createLinearGradient(xstart,ystart,xend,yend);//开始坐标到结束坐标
grd.addColorStop(stop,color);//stop为浮点数，开始坐标点到结束坐标点直线上，某个位置（0.0~1.0之间）
//例：
var skyStyle = context.createLinearGradient(0,0,800,800);
skyStyle.addColorStop(0.0, 'black');
skyStyle.addColorStop(1.0, 'blue');context.fillStyle = skyStyle;

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//开始圆心坐标到结束圆心坐标，以及半径
grd.addColorStop(stop,color);//stop为浮点数，开始坐标点到结束坐标点直线上，某个位置（0.0~1.0之间）

createPattern(img,repeat-style) //img为图片对象，repeat-style填充格式
//其中repeat-style: no-repeat/repeat-x/repeat-y/repeat
//例：
var backgroundImage = new Image();
backgroundImage.src = "bg.jpg";
backgroundImage.onload = function(){
var pattern = context.createPattern(backgroundImage,"repeat");
context.fillStyle = pattern;
context.fillRect(0,0,800,800);
}

createPattern(canvas,repeat-style) //canvas对象，repeat-style填充格式

window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
var backCanvas=createBackgroundCanvas();
var pattern=context.createPattern(backCanvas,"repeat");
context.fillStyle=pattern;
context.fillRect(0,0,800,800);
}
function createBackgroundCanvas(){
var backCanvas=document.createElement("canvas");
backCanvas.width=100;
backCanvas.height=100;
var backContext=backCanvas.getContext("2d");
backContext.beginPath();
backContext.moveTo(15,15);
backContext.lineTo(50,50);
backContext.lineWidth=10;
backContext.strokeStyle="green";
backContext.stroke();
return backCanvas;
}

createPattern(video,repeat-style) //video视频对象

context.arcTo(
x1,y1,x2,y2, //x1,y1,x2,y2两个坐标与起始点x0,y0组成一个角
radius //半径
)

context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,R);
//起始点为(x0,y0)，该弧线与01线以及12线相切

context.moveTo(x0, y0); //起始点
context.quadraticCurveTo(
x1, y1, //控制点坐标
x2, y2 //终点坐标
)

context.moveTo(x0, y0); //起始点
context.bezierCurveTo(
x1, y1, //控制点坐标
x2, y2, //控制点坐标
x3, y3 //终点坐标
)

context.font = "font-style font-variant font-weight font-size font-family"; //css字体样式，默认值："20px sans-serif"
context.fillText(String, x, y, [maxlen]); //String字符串，和坐标位置，第四个为可选参数，这行文字的最长宽度
context.strokeText(String, x, y, [maxlen]); font-style: normal (Default)
italics (斜体字)
oblique (倾斜字体)font-variant: normal (Default)
small-caps (小写英文字母变成小的大写字母)font-weight: normal (Default)
lighter
bold
bolder
100,200,300,400(normal)
500,600,700(bold)
800,900font-size: 20px (Default)
2em
150%font-family: 设置多种字体备选，支持@font-face

context.textAlign = left
right
center

context.textBaseline = top
middle
bottom
alphabetic (Default)
ideographic
hanging

context.measureText(String).width //获取渲染的字符串的宽度

context.shadowColor //阴影颜色
context.shadowOffsetX //阴影的位移值
context.shadowOffsetY
context.shadowBlur //阴影模糊度

context.globalAlpha = 1 (Default) //全局透明度，默认不透明context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果，默认是(source-over)后面绘制的图像覆盖前面绘制的图像
"source-atop" //后面绘制的图像覆盖前面绘制的图像，但后面的图像只显示重叠部分
"source-in" //后面绘制的图像覆盖前面绘制的图像，但只显示重叠部分
"source-out" //只显示后绘制的图像，而且重叠部分被切掉
"destination-over" //前面绘制的图像覆盖后面绘制的图像
"destination-atop" //前面绘制的图像覆盖后面绘制的图像，但前绘制的图像只显示重叠部分
"destination-in" //前面绘制的图像覆盖后面绘制的图像，但只显示重叠部分
"destination-out" //只显示前绘制的图像，而且重叠部分被切掉
"lighter" //重叠部分颜色叠加融合
"copy" //只显示后绘制图像
"xor" //异或，重叠部分被挖空

void ctx.clip();
void ctx.clip(fillRule);
void ctx.clip(path, fillRule);

ctx.arc(100, 100, 75, 0, Math.PI*2, false);
ctx.clip();
ctx.fillRect(0, 0, 100,100);

context.clearRect(x,y,width,height) //清空指定的区域context.isPointInPath(x,y) //点击检测函数，该点是否在当前规划路径内，当检测点包含在当前或指定的路径内，返回 true；否则返回 false//以下两个是获取鼠标点击在canvas坐标
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;

CanvasRenderingContext2D.prototype.drawStar = function(){}

<canvas id="canvas">当前浏览器不支持Canvas，请更换浏览器再试</canvas>

https://code.google.com/p/explorecanvas/
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->