canvas也是html中的一个元素，可以给这个元素添加一些html属性，属性width默认为300px，heigth默认为150px；
canvas是h5中新增的众多元素中的一个，直译过来叫做画布，可以用来通过h5绘制一些图形效果；
刚开始的时候只是知道是用来做一些图形效果的，但是后来了解到canvas的强大
可以制作游戏，图标制作，banner广告，模拟器，字体设计，制作图形编辑器等等老多了，不过千里之行始于足下，还是先看看基本的一些方法和属性吧！
想要用画布第一步：需要先创建一个canvas画布
第二步：定义画布的大小，并且给画布指定一个对应的id
第三步：在javascript中获取canvas画布对象
第四步：通过canvas对象的getContext()方法获取canvas绘图上下文对象
完成这4步以后呢，就可以正式的绘制图像啦~~
不过说了这么多肯定还是云里雾里，程序猿还是要用代码理解起来更快
<canvas width="500" height="500" id="wandou">您的浏览器不支持canvas</canvas>
这里有一个非常重要的点，也是时间久了容易忘记的点，就是设置canvas的宽高，一般写样式我们习惯了用css中写，很少用到行内样式
但是canvas与其他的不同，想要设置宽高的时候是直接用行内样式来设置的，而不是用css、js等去对canvas进行设置，否则，画布会被拉伸，被拉伸的画布会导致用户无法看到全部的图形；
第一步、第二步完成了，现在就开始下面的了
<script>
var canvas=document.getElementById('wandou');
//在js中拿到canvas这块画布，用到了DOM获取对象，除了可以用getElementById外，其他的getElementsByTagName等等其他的都可以，但是如果获取的是数组对象需要加上下标
var ctx=canvas.getContext('2d');
//getContext('2d')表示调用canvas的2d上下文，也就是想要绘制平面图形
//画布的左上角为原点，width表示横向可用像素，height表示纵向可用像素
//下面呢。我们就在canvas上划一条直线，大家都知道，如果想划一条直线的就，就需要两个点来确定直线的两端，在画布中也是一样，需要确认起始点，结束点，再描线，和平时用笔划画差不多。
//canvas默认以像素为单位，在坐标中不需要写px
ctx.moveTo(50,50);
//设置起点，第一个点的位置50，50,也就是距离画布左上角（原点）x轴向偏移50px，y轴向下偏移50px
ctx.lineTo(150,250);
//设置终点，第二个点的位置150,250，,也就是距离画布左上角（原点）x轴向偏移150px，y轴向下偏移250px
//大功即将搞成，临门一脚了
ctx.stroke();
//描线，看到这一步的朋友们是不是感觉跟生活中画图是一样的？先画出两个点，然后用铅笔一描线就哦了
//怎么样是不是感觉还是很简单的？也就只有几步的事情哟，看完了，赶紧试试吧！！
</script>
绘制完成的效果，给大家截了下图，为了方便看，我给canvas加了一个边框，可能图形简单了点，哺乳纲
上面我们说到用canvas来划直线，有没有觉得很神奇，就和划画一样，如果您认为它只能划直线那就大错特错了，现在个让我们来画个三角形，这都是生活中最常见的平面图形了
首先需要创建一个canvas
<canvas width="500" height="500" id="wandou"></canvas>
<script>
var canvas=document.getElementsByTagName('canvas')[0];
//这个上面说了哟，如果用getElementsByTagName需要用下标，如果是第一张画布就用[0]就可以了
var ctx=canvas.getContext('2d');
//三角形也是平面图形所以用2d就可以了
ctx.moveTo(50,50);
//起始点
ctx.lineTo(450,50);
//第一个终点
ctx.lineTo(250,200);
//第二个终点
ctx.lineTo(50,50);//最后一个终点，因为三角形是闭合的，所以坐标和初始坐标一样
ctx.stroke();
//描边，三角形就可以了
//这有个注意的点就是描边，不是写一个起始点一个终点，就描边一次，而是把所有的起始点，终点都定好以后，一次性描边
</script>
好啦，既然三角形都会划了，什么正方形、矩形、菱形或者多边形就都可以划了，发挥想象画一个自己喜欢形状把，比如五角星？哈哈
当然除了在body中直接创建一个canvas标签（比较简单），也可以在js中创建一个canvas
<script>
//首先创建一个canvas标签
var canvas=document.createElement('canvas');
//把canvas标签插入到body中或者div中
document.body.appendChild(canvas);
canvas.id('wandou');
//给canvas画布添加id属性
canvas.width=500;
canvas.height=500;
//给画布设置宽高
//这样就创建完成了，但是可能什么也看不见，可以给canvas用css设置border：1px solid #000，这样就能看见画布的大小了
</script>
今天简单了解了下canvas，可以绘制基本图形了，后面会更深入的介绍canvas的属性及方法，做出更多更好玩的东东...