<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>

 

　实现效果如下：