canvas是h5的标签，该标签定义图形，比如图表和其他图像。该标签是行级元素。标签只是图形容器，必须使用脚本来绘制图形。canvas标签是h5新增的标签，对于很多浏览器都具有兼容性，虽然具有兼容性，但通过canvas标签可以制作许多图形和好看的图表、图像以及一些动画效果，甚至可以只使用canvas标签来制作一款小游戏。在说canvas之前先说一说面向对象中的自定义事件。
我们都知道，无论是面向对象还是其他，DOM元素都具有一些事件，比如：onclick、onmousedown…等。这些都是系统自带的，若开发人员想要自己定义事件和自定义事件绑定该如何实现？那么，这次自定义事件或许对你会有一些帮助。那么，我们就用一些例子来和大家说一说自定义事件。
例:
<body>
<div id="div"></div>
<script>
var div=document.getElementsByTagName("div")[0];
function addEvent(element,type,fn){
element.obj=element.obj||{};
element.obj[type]=element.obj[type]||[];
element.obj[type].push(fn);
}
function firEvent(element,type){
var arr=element.obj[type];
for(var i=0;i<arr.length;i++){
arr[i]();
}
}
addEvent(div,"abc",function(){...});
fireEvent(div,"abc");
</script>
//JQuery
$("#div").on("hello",function(){...});
$("#div").trigger("hello");//绑定自定义事件
</body>书归正传，接下来和大家来唠一唠canvas。我们依然还是以一个例子来解析一下canvas.
例:
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.background = "hotpink";
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(400,400);
ctx.closePath();
ctx.strokeStyle = "yellow";
ctx.lineWidth = "10";
ctx.stroke();
ctx.fillStyle="blue"
ctx.fill();
</script>
</body>以上面例子来解析一下canvas中各个语法和属性的含义。
在canvas坐标系中，从最左上角的0，0开始，x向右增大,y向下增大
(1）wideth：设置canvas的宽。canvas的默认宽为300px。设置canvas的宽高只能通过canvas.width的方式来进行对canvas宽高的设置和修改。
（2）height:设置canvas的高。canvas的默认高为150px。
（3）getContext(“2d”):得到canvas的上下文场景(获得画布的控制权),2d表示为平面效果。若想要3d效果，则将2d设置成webgl.只有获得画布的控制权才可以在canvas画布上绘制。
（4）moveTo(x,y):设置绘制路径的起点，相当于移动画笔到某个位置
（5）lineTo(x,y):从上一点绘制一条直线到x，y这个坐标点
（6）stroke():描边，根据路径绘制线，路径只是草稿，真正绘制线必须执行stroke
（7）fill():填充，是将闭合的路径的内容填充具体的颜色
（8）lineWidth:绘制线的宽度
（9）beginPath():开始路径
（10）closePath():闭合路径
（11）strokeStyle:描边的样式
（12）fillStyle:填充的样式
下面通过几个案例来和大家看一下通过canvas绘制图形。
例1：绘制表格
<canvas></canvas>
<script>
var canvas=document.getElementsByTagName("canvas")[0];
var ctx=canvas.getContext("2d");
canvas.width=500;
canvas.height=500;
for(var i=0;i<=500;i+=25){
ctx.moveTo(i,0);
ctx.lineTo(i,500);
ctx.moveTo(0,i);
ctx.lineTo(500,i);
}
ctx.stroke();
</script>效果图:
例2:
矩形1:
<canvas></canvas>
<script type="text/javascript">
var canvas=document.getElementsByTagName("canvas")[0];
var ctx=canvas.getContext("2d");
canvas.width=500;
canvas.height=500;
ctx.rect(100,200,300,400);//rect(x,y,width,height),可以直接绘制矩形
ctx.strokeStyle="black";
ctx.stroke();
ctx.fillStyle="aquamarine";
ctx.fill();
</script>矩形2
<canvas></canvas>
<script type="text/javascript">
var canvas=document.getElementsByTagName("canvas")[0];
var ctx=canvas.getContext("2d");
canvas.width=500;
canvas.height=500;
ctx.strokeStyle="black";
ctx.strokeRect(100,200,300,400);//绘制矩形路径的同时也描边
ctx.fillStyle="aquamarine";
ctx.fillRect(100,200,300,400);//绘制矩形路径的同时填充
</script>效果图:
例3:圆弧
<canvas></canvas>
<script type="text/javascript">
var canvas=document.getElementsByTagName("canvas")[0];
var ctx=canvas.getContext("2d");
canvas.width=400;
canvas.height=400;
ctx.beginPath();
ctx.arc(200,200,200,0,Math.PI/2,false);//arc(x,y,r:半径,sAngle:开始的角度,eAngle:结束角度，counterclockwise:是否是逆时针，true是逆时针,false是顺时针，默认为false),绘制圆弧
ctx.stroke();
</script>效果图:
例4:饼图
<canvas></canvas>
<script type="text/javascript">
var data=[
{
value:0.1,
color:"#9370db"
},
{
value:0.3,
color:"#6495ed"
},
{
value:0.2,
color:"#ffe4b5"
},
{
value:0.3,
color:"#f08080"
},
{
value:0.1,
color:"#556b2f"
}
];
var canvas=document.getElementsByTagName("canvas")[0];
var ctx=canvas.getContext("2d");
canvas.width=500;
canvas.height=500;
var start=0;
var end=0;
for(var i=0;i<data.length;i++){
end=start+Math.PI*2*data[i].value;
ctx.beginPath();
ctx.moveTo(250,250);
ctx.arc(250,250,200,start,end);
ctx.fillStyle=data[i].color;
ctx.fill();
start=end;
}
</script>
