原本也不想学过多的HTML5,但是最近确实有点闲，也不知道学什么，去图书馆也就随便看看。也就只看看它是如何使用的。
它是HTML5提供来画图，它的使用也不算是太麻烦，就将他们记下来，以后没事了看看。
1.画图步骤：获取画布、设置环境、画图
2.canvas提供一个标签，然后其它的操作都是在js中完成。
3.画图
(1)标签
<canvas height="800px" width="800px" id="canvas" style="background:#9CC" id="canvas"></canvas>
在页面中就这一句，其他的都是在js中完成，获取到一个documnet对象。
（2）获取画布
var canvas=document.getElementById("canvas");
（2）设置环境
var cx=canvas.getContext(‘2d‘);
（3）画一条线段
cx.lineWidth=10; //这是线的宽度
cx.strokeStyle="#ff9900"///设置颜色
cx.moveTo(20,20);//从哪里开始画
cx.lineTo(100,20);//画的长度
cx.stroke();//开始画,将线划出来
（4）画一个圆
cx.closePath();//关闭画笔，多个路径会连在一起，所以需要开始，画完之后结束路径
cx.beginPath();
cx.lineWidth=10;
cx.fillStyle="rgb(255,0,0)";
//cx.arc(横,纵，半径，角度1，角度2，正画，还是反画);
cx.arc(200,50,23,0,200,false);
cx.stroke();
cx.fill();
cx.closePath();
画笔宽度、颜色，是最近的一次，设置值，可以重新设置就可以了；
(5)画长方形（一）
cx.beginPath();
cx.rect(300,300,200,200);//设置起点， 长，宽
cx.stroke();
cx.closePath();
画长方形实心（二）
cx.beginPath();
cx.strokeRect(300,150,100,100);
cx.fill();
cx.closePath();
画长方形（三）推荐的使用方法
cx.beginPat
cx.fillRect(300,200,100,100);
cx.closePath();
（6）写入字体
cx.font="40px 黑体"; //注意顺序
cx.fillText("我是kweep",20,300); //内容，大小
空心
cx.lineWidth=1;
cx.strokeText("我是kweep",40,340);
（7）画入一个图片
var img = new Image();
img.src="路径";
cx.drawImage(img,20,370,230,306);//开始位置，图像的大小，不然会强制缩进的。
（8）画三角形
cx.beginPath();
cx.moveTo(300,500);
cx.lineTo(300,600);
cx.lineTo(400,500);
cx.closePath();
cx.stroke();
画实心的
cx.beginPath();
cx.moveTo(300,500);
cx.lineTo(300,600);
cx.lineTo(400,500);
cx.closePath();
cx.fill();
注意：先关闭，在画图