1、画布

// context.fillStyle=color|gradient|pattern;

/*  1、color:

参数(x,y,width,height)

x,y是左上角起始坐标，后两个参数为宽和高

*/

/*2、gradient

createLinearGradient()方法创建线性的渐变对象.

x0渐变开始点的x坐标,y0渐变开始点的y坐标

x1渐变结束点的x坐标,y1渐变结束点的y坐标

*/

/*

createRadialGradient()方法创建放射状/圆形渐变对象。

x0渐变的开始圆的x坐标

y0渐变的开始圆的y坐标

r0开始圆的半径

x1渐变的结束圆的x坐标

y1渐变的结束圆的y坐标

r1结束圆的半径

*/

/*createPattern()方法在指定的方向内重复指定的元素。

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

image规定要使用的模式的图片、画布或视频元素。

repeat默认。该模式在水平和垂直方向重复。

repeat-x该模式只在水平方向重复。

repeat-y该模式只在垂直方向重复。

no-repeat该模式只显示一次（不重复）。

*/