canvas入门篇
最近在折腾canvas，写一点笔记。
注：本文面向canvas入门的前端，写的如有纰漏请指出，不喜勿喷。
这一系列的文章最终结果是做出本人博客的动态背景，不过凡事都要循序渐进，我们先从最简单的绘制开始。
本人接触电脑的第一个绘图工具就是windows自带的画图。画图的流程很简单，选好填充颜色、线条颜色、粗细，用鼠标选好形状就可以画出来了，而且每次重新改变填充颜色、线条颜色、粗细只会对后面的绘制的形状起作用（听起来就是废话，但是我们绘制canvas的思路也是如此）。
创建canvas画布
首先要有一块画布，我们才能往里面画东西。
我们要在html里添加一个canvas标签，在js里获取这个元素，而canvas的主要属性有width height，我们可以用js修改这两个属性让canvas布满整个屏幕，达到自适应，然后就是获取2d上下文：
var canvas = document.querySelector("#canvas");//宽高自适应canvas.width = window.innerWidth;canvas.height = window.innerHeight;//获取2d上下文var ctx = canvas.getContext("2d"); /*为了看清楚画布，我们可以描个边*/#canvas{ border: 1px solid black;}/*有习惯做reset的可以做全一点，这里把body布满页面*/body{ margin: 0; padding: 0;} 绘图的画布到这里就创建完了，目前canvas的背景是透明的（可以按f12看一下）。
绘制样式
想要绘制形状，先要有绘制样式，当然canvas有默认的绘制样式，我主要介绍自己常用的，有兴趣的可以自己去深入了解。
fillStyle填充属性，支持十六进制，rgb，rgba填充，颜色名称strokeStyle描边属性，支持十六进制，rgb，rgba填充，颜色名称lineWidth线条属性，数值
修改这些属性要通过上下文对象ctx
ctx.fillStyle = "green";ctx.strokeStyle = "black";ctx.lineWidth = 3;
绘制形状
和画图一样，我们绘制的形状有线、矩形、弧和多边形，圆是包含在弧里面的，这些API也很容易看得懂。
开始路径
这点非常重要，虽然没有这行代码也可以绘制图形，但是每次图形的绘制会在上一个图形的结束点开始绘制，这明显不是我们想要的结果，所以务必在每个形状绘制前加入这么一行代码。
ctx.beginPath();
矩形
矩形是默认的形状，有自己的fillRect()和strokeRect()。
//填充矩形：ctx.fillRect(x坐标,y坐标,width宽度,height高度);ctx.fillRect(50,50,100,100);//描边矩形：ctx.strokeRect(x坐标,y坐标,width宽度,height高度);ctx.strokeRect(50,50,100,100);
圆（弧）
弧只是路径，光靠arc()只能定义路径，需要用fill()和stroke()才能填充和绘制。
//圆路径：ctx.arc(x坐标,y坐标,r半径,开始弧度,结束弧度,布尔值);ctx.arc(100,100,50,Math.PI/180*0,Math.PI/180*360,false);//填充圆ctx.fill();//描边圆ctx.stroke();
线
线是路径，两点成线，所以要定义开始点moveTo()，目标点lineTo()。
//定义线的起始点ctx.moveTo(460,460);//定义目标点ctx.lineTo(500,500);//折线ctx.lineTo(400,600);//折线ctx.lineTo(200,600);//绘制线条ctx.stroke();
多边形
多边形其实也是线，一开始我们说要用beginPath()重新定义开始的点，而绘制多边形则要闭合路径closePath()。
//绘制等腰三角形ctx.beginPath();ctx.moveTo(200,200);ctx.lineTo(150,300);ctx.lineTo(250,300);//闭合路径ctx.closePath();ctx.stroke();
本节先讲基础的绘制知识，下一节内容会介绍requestAnimationFrame()动画。