Canvas
canvas元素：该元素只是图形的容器，必须使用JavaScript脚本绘制图形
实际上canvas元素本身并不绘制图形，它相当于一张空画布
获取canvas元素对应的DOM对象：var canvas=document.getElementById('mc');
获取canvas上绘图的CanvasRenderingContext2D对象：
var ctx =canvas.getContext('2d');
ctx：真正的绘图对象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>画图入门</title>
</head>
<body>
<h2>画图入门</h2>
<!--canvas元素：该元素只是图形的容器，必须使用JavaScript脚本绘制图形-->
<canvas id="mc" width="300" height="180"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc');
var ctx =canvas.getContext('2d');
ctx.fillStyle='#f00';
ctx.fillRect(30,10,80,100);
</script>
</body>
</html>
填充一个矩形（若不设置填充颜色，默认为黑色）：ctx.fillRect(*,*,*,*);
绘制一个矩形边框(未填充颜色）：ctx.strokeRect(*,*,*,*);
前两个参数代表相对canvas元素的坐标，后两个参数代表宽和高
设置填充颜色：ctx.fillStyle="...";
设置线条颜色：ctx.strokeStyle="...";
设置笔触的线条宽度：ctx.lineWidth=10;
设置线条连接点的风格，有miter（尖角）,round（圆角）,bevel（斜角）三种风格：ctx.lineJoin="round";
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>绘制矩形</title>
</head>
<body>
<h2>绘制矩形</h2>
<canvas id="mc1" width="400" height="280"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc1');
var ctx=canvas.getContext('2d');
ctx.fillStyle="#f00";
ctx.fillRect(30,20,120,60);
ctx.fillStyle="#ff0";
ctx.fillRect(80,60,120,60);
ctx.strokeStyle="#00f";
ctx.lineWidth=10;
ctx.strokeRect(30,130,120,60);
ctx.strokeStyle="#0ff";
ctx.lineJoin="round";
ctx.strokeRect(80,160,120,60);
ctx.strokeStyle="#f0f";
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);
</script>
</body>
</html>
textBaseline:设置字符串的垂直对齐方式，有top、hanging、middle、bottom的属性
textAlign：设置字符串的水平对齐方式，有start、end、left、right、center等属性
Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜
font：设置字体
fillText：填充字符串，两个数字为坐标：ctx.fillText('字符串',0,0);
strokeText：绘制字符串的边框，两个数字为坐标：ctx.strokeText('字符串',50,50);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>测试</title>
</head>
<body>
<h2>绘制文字</h2>
<canvas id="mc2" width="600" height="280"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc2');
var ctx=canvas.getContext('2d');
ctx.textBaseline="top";
ctx.fillStyle="#00f";
ctx.font="italic 50px 隶书";
ctx.fillText('疯狂Java讲义',0,0);
ctx.fillStyle="#00f";
ctx.font="oblique 50px 华文琥珀";
ctx.fillText('疯狂Java讲义',300,0);
ctx.strokeStyle='#f0f';
ctx.font='bold 45px 宋体';
ctx.strokeText('疯狂Java讲义',50,50);
ctx.strokeStyle='#f0f';
ctx.font='bold 45px 楷体';
ctx.strokeText('疯狂Java讲义',50,100);
ctx.strokeStyle='#f0f';
ctx.font='bold 45px 黑体';
ctx.strokeText('疯狂Java讲义',50,150);
ctx.strokeStyle='#f0f';
ctx.font='bold 45px 华文行楷';
ctx.strokeText('疯狂Java讲义',50,200);
</script>
</body>
</html>
shadowBlur:设置阴影的模糊程度，值越大，阴影的模糊程度越大
shadowColor：设置阴影颜色
设置阴影在x,y方向上的偏移：ctx.shadowOffsetx=10;ctx.shadowOffsetY=-8;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>测试</title>
</head>
<body>
<h2>启用阴影</h2>
<canvas id="mc3" width="600" height="280"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc3');
var ctx=canvas.getContext('2d');
ctx.shadowBlur=5.6;
ctx.shadowColor="#222";
ctx.shadowOffsetx=10;
ctx.shadowOffsetY=-8;
ctx.fillStyle="#00f";
ctx.font="italic 50px 隶书";
ctx.textBaseline="top";
ctx.fillText('疯狂Java讲义',0,0);
ctx.strokeStyle='#f0f';
ctx.font='bold 45px 宋体';
ctx.strokeText('疯狂Java讲义',50,50);
ctx.fillRect(20,150,180,80);
ctx.lineWidth=8;
ctx.strokeRect(300,150,180,80);
</script>
</body>
</html>
开始定义路径: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();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>测试</title>
</head>
<body>
<h2>绘制圆形</h2>
<canvas id="mc4" width="600" height="280"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc4');
var ctx=canvas.getContext('2d');
for(var i=0;i<10;i++)
{
ctx.beginPath();
ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle='rgba(255,0,255,'+(10-i)*0.1+')';
ctx.fill();
}
</script>
</body>
</html>
