本文共 1260 字，大约阅读时间需要 4 分钟。

Canvas

canvas元素：该元素只是图形的容器，必须使用JavaScript脚本绘制图形实际上canvas元素本身并不绘制图形，它相当于一张空画布获取canvas元素对应的DOM对象：var canvas=document.getElementById('mc');获取canvas上绘图的CanvasRenderingContext2D对象：var ctx =canvas.getContext('2d');ctx：真正的绘图对象			
   					
画图入门
	
   	
   		

填充一个矩形（若不设置填充颜色，默认为黑色）：ctx.fillRect(*,*,*,*);绘制一个矩形边框(未填充颜色）：ctx.strokeRect(*,*,*,*);前两个参数代表相对canvas元素的坐标，后两个参数代表宽和高设置填充颜色：ctx.fillStyle="...";设置线条颜色：ctx.strokeStyle="...";设置笔触的线条宽度：ctx.lineWidth=10;设置线条连接点的风格，有miter（尖角）,round（圆角）,bevel（斜角）三种风格：ctx.lineJoin="round";			
   					
绘制矩形
	
   			

textBaseline:设置字符串的垂直对齐方式，有top、hanging、middle、bottom的属性textAlign：设置字符串的水平对齐方式，有start、end、left、right、center等属性Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜font：设置字体fillText：填充字符串，两个数字为坐标：ctx.fillText('字符串',0,0);strokeText：绘制字符串的边框，两个数字为坐标：ctx.strokeText('字符串',50,50);			
   					
绘制文字
	
   			

shadowBlur:设置阴影的模糊程度，值越大，阴影的模糊程度越大shadowColor：设置阴影颜色设置阴影在x,y方向上的偏移：ctx.shadowOffsetx=10;ctx.shadowOffsetY=-8;			
   					
启用阴影
	
   			

开始定义路径:ctx.beginPath();添加一段圆弧：ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);arc：前两个参数指定圆弧的圆心，第三个参数指定圆弧的半径，第四五个参数用于设角度，结束角度，最后一个参数用于设置是否顺时针旋转关闭路径：ctx.closePath();//设置填充颜色,颜色可以用数字代表，0-255 黑-白：ctx.fillStyle='rgba(255,0,255,'+(10-i)*0.1+')';填充当前路径：ctx.fill();			
   					
绘制圆形