绘制矩形

getContext() 方法返回一个用于在画布上绘图的环境 ，该环境对象实现了一个画布所使用的大多数方法，语法：

var c document.getElementById('myCanvas');

var context=c.getContext('2d');

 // 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。 

 // 提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

 createLinearGradient() 方法创建线性的渐变对象。 语法：

context.createLinearGradient(x1,y1,x2,y2);

// X1 渐变开始点的 x 坐标
// Y1 渐变开始点的 y 坐标

// X2 渐变结束点的 x 坐标
// Y2 渐变结束点的 y 坐标

addColorStop() 方法规定gradient对象中的颜色和位置

 grd.addColorStop(0, "black');
 grd.addColorStop(1, "white");

 fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式

context.fillStyle=color|gradient|pattern;

微信小程序API 绘图·设置填充样式setFillStyle()

context.setFillStyle(gradient)

fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色

 context.fillRect(x, y, width, height);

// x 矩形左上角的 x 坐标
// y 矩形左上角的 y 坐标
// width  矩形的宽度，以像素计
// height 矩形的长度，以像素计