canvas是定义在浏览器上的画布，canvas不仅仅像是p标签等的一个元素，canvas更是一个编辑工具，是一套编程的接口，它的出现已然超过了Web基于文本的设计初衷。canvas可以设计出绚丽的动画，奇妙的游戏等，可以是你的网页绚丽多彩！
一、canvas绘图环境搭建
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>canvas</title>
</head>
<body >
<canvas id="canvas" style="border: 1px solid #eee;display: block;margin: 50px auto">
当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//使用context进行绘制(canvas是基于状态的绘制环境)
}
</script>
</body>
</html>
二、绘制直线
context.moveTo();指定所绘直线的起点坐标
context.lineTo();指定所绘直线的终点坐标
context.stroke();绘制
示例如下：
context.lineWidth用于设置所绘直线的宽度，context.strokeStyle用于设置所绘直线的颜色。
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//绘制(canvas是基于状态的绘制环境)
context.moveTo(100,100)
context.lineTo(700,700)
context.lineWidth=10
context.strokeStyle="#058"
context.stroke();
}
</script>
三、多边形的封闭与填充
context.beginPath();...context.clocePath();封闭所绘的多边形
context.fillStyle用于设置所绘箭头的填充色
context.strokeStyle用于设置所绘箭头的边框色
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//封闭多边形的绘制与填充（箭头)
context.beginPath()
context.moveTo(100,350)
context.lineTo(500,350)
context.lineTo(500,200)
context.lineTo(700,400)
context.lineTo(500,600)
context.lineTo(500,450)
context.lineTo(100,450)
context.closePath()
context.lineWidth=10
context.fillStyle="yellow"
context.strokeStyle="blue"
context.fill()
context.stroke()
}
</script>
四、绘制矩形
context.rect(x,y,width,height)
context.fillRect(x,y,width,height);绘制带填充色的矩形
context.strokeRect(x,y,width,height);绘制带边框色的矩形
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//矩形覆盖和透明色
drawRect(context,100,100,400,400,10,"#058","red")
drawRect2(context,300,300,400,400,10,"#058","rgba(0,256,0,0.5")//不透明色的值为0.5
}
function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
cxt.beginPath();
cxt.rect(x,y,width,height);
cxt.closePath();
cxt.lineWidth=borderWidth;
cxt.fillStyle=fillColor;
cxt.strokeStyle=borderColor;
cxt.fill();
cxt.stroke();
}
function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
cxt.lineWidth=borderWidth;
cxt.fillStyle=fillColor;
cxt.strokeStyle=borderColor;
cxt.fillRect(x,y,width,height);
cxt.strokeRect(x,y,width,height);
}
</script>
五、线条的属性
1.lineCap用于设置线条两端的形状。包含三个值：butt（默认值）、round（圆头）、square（方头）。
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//开始绘制
context.lineWidth=50;
context.strokeStyle="#005588";
context.beginPath();
context.moveTo(100,200);
context.lineTo(700,200);
context.lineCap="butt";
context.stroke();
context.beginPath();
context.moveTo(100,400);
context.lineTo(700,400);
context.lineCap="round";
context.stroke();
context.beginPath();
context.moveTo(100,600);
context.lineTo(700,600);
context.lineCap="square";
context.stroke();
context.lineWidth=1;
context.strokeStyle="#27a";
context.moveTo(100,100);
context.lineTo(100,700);
context.moveTo(700,100);
context.lineTo(700,700);
context.stroke();
}
</script>
2.lineJoin用于设置线条与线条相交时呈现的状态。包含三个值：miter（默认值）、bevel、round（圆头）。
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//用变量的方式绘制五角星(函数化)
context.lineWidth=10;
context.lineJoin="miter";
drawStar(context,150,300,400,400,0);
}
function drawStar(cxt,r,R,x,y,rot){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
cxt.closePath();
cxt.stroke();
}
</script>
六、总结（五角星绘制）
思路：将五角星放在同心圆上进行绘制，分析如下图：
五角星绘制思路图.jpg
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//用变量的方式绘制五角星(函数化)
context.lineWidth=10;
drawStar(context,150,300,400,400);
}
function drawStar(cxt,r,R,x,y){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,-Math.sin((18+i*72)/180*Math.PI)*R+y);
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,-Math.sin((54+i*72)/180*Math.PI)*r+y);
}
cxt.closePath();
cxt.stroke();
}
</script>
