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

 

 实现效果如下: