1、Canvas元素
介绍：canvas是HTML5新增的专门用来绘制图形的元素，canvas元素是一块无色透明的区域，开发者需要通过js脚本在元素中绘图；
可以在canvas标签中可以设置宽高；
绘制图的步骤：
1、在HTML5中添加canvas元素，设置宽高、ID
2、通过js找到与之对应的ID：
var c=document.getElementById(“myCanvas”);
3、通过canvas元素的getContext方法来获取其上下文，即创建Context对象，获取进行绘制的2D环境；
var context=c.getContext(“2D”);
4、使用js脚本来进行绘制
如：context.fillStyle=’#ff0000’;
context.fillRect（50,25,100,50）；
实战（canvas画直线）
JavaScript脚本里
window.functiion(){
var canvas=document.getElementById(“myCanvas”);//通过ID获取canvas元素
var c=canvas.getContext(“2d”);//获取进行绘制的2D环境；
c.beginPath();//开始绘图
c.moveTo(50,c.height/2);//设置直线的起点
c.lineTo(80,c.height/2);//设置直线的终点
c.lineWidth=10;//设置直线的宽度
c.strokeStyle=“green”;//设置直线的颜色，默认为黑色
c.lineCap=“round”;//设置直线的样式，有butt、round、square，默认为butt；
c.stroke();//将图绘制出来；
c.closePath();//结束绘图
}
实战（canvas画直线交叉处）
JavaScript脚本里
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(10,10);//直线起点
c2.lineTo(100,90);//直线交叉处
c2.lineTo(190,10);//直线终点
c2.lineWidth=“10”;//直线宽度
c2.lineJoin=“bevel”;//直线交叉处的样式，默认为miter尖角，还有round圆润，bevel缺省
c2.stroke();//添加到页面上
c2.closePath();//结束绘图
}
实战（canvas画曲线）
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(20,20);//直线起点
c2.lineTo(100,20);//直线终点
c2.arcTo(150,20,150,90,50);//画曲线，从100,20的位置画到180,90的位置，半径为20；
c2.lineTo(150,90);//接着画直线到150,90；
c2.lineWidth=“10”;
c2.stroke();//将图绘制出来；
c2.closePath();
}
实战（canvas画二次贝塞尔曲线）
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(20,20);//直线起点
c2.quadraticCurveTo(150,120,200,10);//画曲线，从20,20的位置到150,120的位置，再到200,10的位置
c2.lineWidth=“10”;
c2.stroke();
c2.closePath();
}
实战（canvas画三次贝塞尔曲线）
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(0,0);//直线起点
c2.bezierCurveTo(60,200,120,0,180,10);//画曲线，从0,0的位置到60,120的位置，再到120,0的位置，再到180,10的位置
c2.lineWidth=“10”;
c2.stroke();
c2.closePath();
}