第一次接触canvas是做毕设的时候，在实现登录页时候用了canvas增添一些样式，那时候学的很浅显，是时候来认真了解一下这个canvas。（相关知识来源于MDN）
canvas初了解
canvas是个HTML5新增的标签，<canvas>标签很像<img>标签，而<canvas> 标签只有两个属性—— width 和 height。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。需要注意的是，canvas的高宽不可以用css设置，那会扭曲的，而且一些老的浏览器版本都不支持canvas。
不支持咋么办？这非常简单：只需要在<canvas>标签中提供替换内容。不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
你可以这样
<canvas id="canvas">alternative content for browsers without canvas support</canvas>也可以这样
<canvas id="clock" width="150" height="150">
<img src="替换内容.png" width="150" height="150" alt="替换图片"/>
</canvas>这里可以发现，以上两段代码中canvas的宽高属性设置，可以直接在标签中设置属性值，也可以在JS中设置，没错，canvas是基于JS绘制的。
基本用法
先来代码，有个宏观了解
<canvas id="canvas">
alternative content for browsers without canvas support
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 1024;
canvas.height = 500;
var context = canvas.getContext("2d");
...
</script><canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如，WebGL使用了基于OpenGL ES的3D上下文。canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas>元素有一个叫做 getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。
JS部分代码的第一行通过使用 document.getElementById() 方法来为<canvas>元素得到DOM对象。一旦有了元素对象，你可以通过使用它的 getContext() 方法来访问绘画上下文。
至此，全都是一些前期准备工作，我们获取了DOM节点，获取到执行的上下文环境，现在就开始绘制图形。然而绘制之前还需要了解一个知识点，因为canvas的绘制都是基于坐标的，那就需要了解什么是画布栅格以及坐标空间。
canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。具体如下图
好，让我们来绘制一个三角形，老样子先来JS代码，再具体分析
var canvas=document.getElementById("canvas");
canvas.width=1024;
canvas.height=500;
var context=canvas.getContext("2d");
context.moveTo(100,100);
context.lineTo(400,400);
context.lineTo(100,400);
context.lineTo(100,100);
context.lineWidth=2;
context.strokeStyle="#058";
context.fillStyle="rgb(2,100,30)";
context.stroke();
context.fill();代码前四行是准备工作，就不赘述了。图形的绘制都是基于执行的上下文，我们绘制的三角形的起点使用了moveTo方法，定在（100,100）这个位置，lineTo()方法是绘制直线，也接受坐标值两个参数。例子中的意思就是从（100,100）到（400,400）画一条直线，再从（400,400）到（100,400），最终再回到（100,100），这样就形成一个回路构成一个三角形。
其实，说已经构成了三角形是不严谨的，我们只是先确定了坐标，还没有真正的完整绘制。这里可以设置线条的宽度和颜色，使用stroke() 方法实现图形轮廓的绘制，代码中还有一个fill() 方法，它是用于填充所绘制的图形，当然需要先设置一下填充的颜色。
通过canvas的简单操作，我们就很轻易的绘制了一个三角形。这就是canvas很基础的知识了，掌握这些就可以尝试着画一些矩形、多边形、不规则图形，圆、椭圆，目前似乎还很难实现，这就需要继续学习呀。