JavaScript在指定区域绘制渐变

JavaScript可以使用HTML5的Canvas API在指定区域绘制渐变。Canvas是HTML5新增的一个元素，用于在网页上动态绘图。以下是创建线性渐变和径向渐变的基本步骤：

**线性渐变（Linear Gradient）**:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 创建渐变对象
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// 定义颜色停止点，第一个颜色在左上角，第二个颜色在右下角
gradient.addColorStop(0, 'red'); // 从红色开始
gradient.addColorStop(1, 'blue'); // 以蓝色结束

// 使用渐变填充矩形
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

**径向渐变（Radial Gradient）**:

var gradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2); // x1,y1,r1为中心点坐标及半径，x2,y2,r2为目标点坐标及半径
gradient.addColorStop(0, 'yellow'); // 中心颜色
gradient.addColorStop(1, 'black'); // 边缘颜色

ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2); // 画出半径为100px的圆
ctx.closePath();
ctx.fill();