H5 新增标签canvas 画布

canvas是写在body中的标签，设置宽高后，通过JS来往其中绘制想要的内容，

canvas可以理解为一个画板，而JS就是你的画笔、

1.获取到画布

var canvas = document.getElementById("canvas");

2.getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

var cxt = canvas.getContext("2d")

绘制文字

1.先设置字体样式

　　cxt.font = "bold 30px 黑体 ";

2.设置字体颜色

　　cxt.fillStyle = 'green';

3.设置字体内容

　　cxt.fillText('我是文字',50,60)
　　在字体内容中，cxt.fillText（文本内容，X轴，Y轴）

并且在文本内容中，fill为实心，stroke为空心

fillStyle适用于所有实心内容；

strokeStyle适用于所有空心内容；

绘制矩形（以坐上角为绘制点）：

fill / stroke Rect(x,y,w,h)

x : x轴的位置

y:y轴的位置

w:矩形的宽

h:矩形的长

绘制矩形阴影

　阴影模糊距离

ctx.shadowBlur=20;
阴影模糊颜色

ctx.shadowColor="black";

在画布中绘制了元素后，清除画布元素
cxt.clearRect(x,y,w,h);
x  y  指的是坐标，w h 是清除的范围大小

渐变色：cxt.createLinearGradient(x0,y0,x1,y1)
这是创建一个渐变对象
然后根据渐变，设置相应颜色
addColorStop(0,"red");
addColorStop(0.5,"#456");
渐变色可以是矩形，也可是圆形，文字等，但是要搭配着他们使用
例如设置好渐变色后，绘制渐变矩形

　　cxt.fillStyle = grad;
　　cxt.fillRect(0,0,400,300);

扇形渐变
cxt.createRadialGradient(x0,y0,r0,x1,y1,r1)

例：

var grad = cxt.createRadialGradient(150,150,0,150,150,150);
grad.addColorStop(0,"red");
grad.addColorStop(0.5,"blue");
grad.addColorStop("1","yellow");

cxt.fillStyle = grad;
cxt.fillRect(0,0,300,300)