<canvas>标签用于绘制图像，但本身并无绘制能力，需使用脚本来完成实际的绘画任务。getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
一般，var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,150);
颜色、样式、阴影
属性 描述
fillStyle 设置或返回用于充填绘画的颜色、渐变或模式 context.fillStyle=color|gradient|pattern;
strokeStyle 设置或返回用于笔触的颜色、渐变或模式。 context.strokeStyle=color|gradient|pattern;
shadowColor 设置或返回用于阴影的颜色。 context.shadowColor=color;
shadowBlur 设置或返回用于阴影的模糊级别。 context.shadowBlur=number
shadowOffsetX 设置或返回阴影与形状的水平距离 context.shadowOffsetX=number;
shadowOffsetY 设置或返回阴影与形状的垂直距离。 context.shadowOffsetY=number;
方法 描述
createLinearGradient() 创建线性渐变（用在画布内容上） context.createLinearGradient(x0,y0,x1,y1);
createPattern() 在指定的方向上重复指定的元素。 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）。 context.createRadialGradient(x0,y0,r0,x1,y1,r1);
addColorStop() 规定渐变对象中的颜色和停止位置。 gradient.addColorStop(stop,color);
线条样式
属性 描述
lineCap 设置或返回线条的结束端点样式。 context.lineCap="butt|round|square";
lineJoin 设置或返回两条线相交时，所创建的拐角类型。 context.lineJoin="bevel|round|miter"; （bevel-斜角，round-圆角，miter-默认尖角）
lineWidth 设置或返回当前的线条宽度。 context.lineWidth=number;
miterLimit 设置或返回最大斜接长度。 context.miterLimit=number;
矩形样式
方法 描述
rect() 创建矩形 context.rect(x,y,width,height); （左上角x,左上角y,矩形宽，矩形高）
fillRect() 绘制"被填充"的矩形。 context.fillRect(x,y,width,height);
strokeRect() 绘制矩形（无填充）。 context.strokeRect(x,y,width,height);
clearRect() 在给定的矩形内清除指定的像素 context.clearRect(x,y,width,height);
路径样式
方法 描述
fill() 填充当前绘图/路径 context.fill()
stroke() 绘制已定义的路径 context.stroke()
beginPath() 起始一条路径，或重置当前路径 context.beginPath()
moveTo() 把路径移动到画布中的指定点，不创建线条 context.moveTo(x,y)
closePath() 创建从当前点回到起始点的路径。 context.closePath()
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条 context.lineTo(x,y);
clip() 从原始画布剪切任意形状和尺寸的区域。 context.clip();
quadraticCurveTo() 创建二次贝塞尔曲线。 context.quadraticCurveTo(cpx,cpy,x,y);
bezierCurveTo() 创建三次贝塞尔曲线。 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
arc() 创建弧/曲线（用于创建圆形或部分圆） context.arc(x,y,r,sAngle,eAngle,counterclockwise);
arcTo() 创建两切线之间的弧/曲线 context.arcTo(x1,y1,x2,y2,r);
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false context.isPointInPath(x,y);
绘制canvas涂鸦画板并下载：
代码如下：
<!DOCTYPE >
<html >
<head>
<meta charset=utf-8" />
<title>canvas绘图板</title>
<style>
canvas{
border:1px dashed black;}
</style>
<script type="text/javascript">
var canvas;
var context;
window.onload=function(){ //onload 事件会在页面或图像加载完成后立即发生
canvas=document.getElementById("drawingCanvas");
context=canvas.getContext("2d");
context.fillStyle="rgb(255,255,255)"; //rgb(255,255,255)白色
context.fillRect(0,0,canvas.width,canvas.height);
context.strokeStyle="rgb(0,0,0)"; //笔触颜色
context.lineWidth=5;
canvas.onmousedown=startDrawing;
canvas.onmouseup=stopDrawing; //onmouseup-鼠标按键被松开时发生
canvas.onmouseout=stopDrawing; //onmouseout 属性在鼠标指针移动到元素外时触发
canvas.onmousemove=draw; //onmousemove 事件会在鼠标指针移到指定的对象时发生
};
function changeColor(color){
context.strokeStyle=color;
}
var isDrawing=false;
function startDrawing(e){
isDrawing=true;
context.beginPath();
context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
}
function draw(e){
if(isDrawing==true){
var x=e.pageX-canvas.offsetLeft;
var y=e.pageY-canvas.offsetTop;
context.lineTo(x,y);
context.stroke();
}
}
function stopDrawing(){
isDrawing=false;
}
function clearCanvas(){
context.fillStyle="rgb(255,255,255)";
context.fillRect(0,0,canvas.width,canvas.height);
}
function savecanvas(){
var w=window.open(canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"),"smallwin","width=400,height=350");
return w;
}
</script>
</head>
<body>
<div align="center">
COLOR<input type="color" id="colorSelect" onchange="changeColor(colorSelect.value);" value="rgb(255,255,255)"/>
WIDTH<input type="range" id="widthSelect" onchange="context.lineWidth=widthSelect.value;" min="1" max="20" value="5"/>
<button id="clearCanvas" onclick="clearCanvas();">CLEAR ALL</button>
<a id="link"></a>
<button id="savecanvas" onclick="savecanvas();">SAVE</button>
<br/>
<canvas id="drawingCanvas" width="800" height="400"></canvas>
</div>
</body>
</html>
实现效果如下：
