如何用HTML5中的canvas绘制渐变矩形
1. HTML5中的canvas
HTML5中的canvas可以用来绘制图像、动画以及游戏，它是一个HTML元素，可以在其中绘制2D或3D图形，相比传统的基于DOM元素的实现方式，在性能方面更具优势。
在使用canvas前，需要在HTML文件中添加canvas元素，定义画布长宽：
<canvas id="canvas" width="800" height="600"></canvas>canvas元素有两个属性，即width和height，分别表示画布的宽和高。这两个属性必须在canvas元素添加到DOM之前以HTML特性的方式指定。
2. 如何绘制渐变矩形
在canvas中，可以使用创建渐变对象来实现渐变效果，渐变对象由创建线性或径向渐变的方法生成。
2.1 创建线性渐变
创建线性渐变需要使用createLinearGradient()方法，该方法有四个参数，用于定义两个端点x0,y0,x1,y1。两个端点分别对应渐变的起点和终点。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
以上代码将在canvas中绘制一条从左上角到右下角的线性渐变。gradient.addColorStop()方法用于向渐变对象中添加颜色停止点，其中第一个参数表示停止在渐变过程中的位置，取值范围为0到1，第二个参数是CSS颜色值。
使用fillRect()方法填充渐变矩形时，可以将fillStyle属性设置为创建的渐变对象。
2.2 创建径向渐变
创建径向渐变需要使用createRadialGradient()方法，该方法有六个参数，用于定义两个圆的位置（圆心坐标和半径），两个圆分别对应渐变的起点和终点。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, Math.min(canvas.width, canvas.height)/2);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
以上代码将在canvas中绘制一个以画布中心为圆心，半径为画布宽高最小值一半的径向渐变。同样地，gradient.addColorStop()方法用于在渐变对象中添加颜色停止点。
总结
HTML5中的canvas可用于绘制渐变矩形。创建渐变对象使用createLinearGradient()或createRadialGradient()方法，通过gradient.addColorStop()方法向渐变对象中添加颜色停止点，然后将创建的渐变对象用于fillRect()方法填充矩形。