canvas

canvas
html5的一个新标签，新功能相当的强大，性能是和用户的电脑相关的，不在一来浏览器。
行级标签
双标签
为了防止低版本的浏览器不支持，我们可以在标签内添加一些对用户说说出的话 对不起....

不能用style样式来控制canvas的宽高，这样会使其按照比例放大，是内部图形变形。
canvas的默认宽高是 300*150

canvas是通过js来控制的
现需要获取到canvas元素
然后获取到他的上上下文 进行这种操作 var context = canvas.getContext("2d");

先来几个简单的函数
context.moveTo（x，y） 将画笔移动到哪一个坐标
context.lineTo（x，y）画线从起始位置向什么位置画线

context.stroke() 将上上述的操作画到画布上去 只有边框
context.strokestyle = "red" 设置线的颜色
context.fill（）也是画到画布上，但是会填充内容
context.fillstyle = "red" 设置填充的颜色
context.fillRect(i,j,100,100); 画矩形的函数 参数 其实位置的坐标 矩形的宽和高 并填充到画布上

context.arc(400,400,300,Math.PI0.5,Math.PI1.5,true);
画圆的方法 参数 圆心的坐标 圆的半径 圆的开始画的位置，圆的结束的位置，顺时针还是逆时针 true是逆时针 默认是逆时针

渐变
1.线性渐变
context.createLinearGradient(0,0,800,800);// 线性渐变
参数： 渐变的其实下标，渐变的终止下标
gra.addColorStop(1,"red"); 添加渐变色
渐变是两个坐标之间的变化，其实是把两个坐标之间的距离等分为0到1，通过设置0-1的不同的颜色就可以实现色彩斑斓的线性渐变

屏幕快照 2017-12-25 下午9.57.49.png

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
var gra = context.createLinearGradient(0,0,800,800);// 线性渐变
gra.addColorStop(0,"yellow");
gra.addColorStop(0.5,"blue");
gra.addColorStop(1,"red");
context.fillStyle = gra;
context.fillRect(0,0,canvas.width,canvas.height);
2.径向渐变
context.createRadialGradient(200,200,20,200,200,200);
径向渐变比县线性渐变多了两个参数，分别是其实位置的半径，和终止位置的半径

canvas里面的添加文字
context.fillText("胖虎",100,100); 添加文字的方法
参数 文字内容，文字添加的位置 默认是 文字的左下角为指定的坐标
context.textBaseline = "middle"; 设置文字在竖直方向上的居中
context.textAlign = "center"; 设置文字在水平方向上的居中
设置了上面两个参数之后，干菜我们设置的坐标就在文字的正中间了

字体的设置
context.font = "bold 50px Arial"; // 设置字的大小必须给字体
参数 字体的font.weight 字体的字号 设置为什么字体