Canvas基础入门（二）：线性渐变、径向渐变与锥形渐变

下面展示一些绘画步骤。

🔺线性渐变与径向和锥形渐变的区别

1. 定义创建canvas画布函数

/**
 * 
 * @param {*} width - 画布宽度
 * @param {*} height - 画布高度
 * @returns canvas - 返回画布对象
 */

//创建canvas画布函数
function CreateCanvas(width = 400, height = 400) {
    //创建标签
    const canvas = document.createElement('canvas');
    //设置宽度，高度
    canvas.width = width;
    canvas.height = height;
    //页面插入canvas标签
    document.body.append(canvas);

    return canvas;
}

2. 绘制线性渐变

/**
 * 
 * @param {*} canvas - 画布对象
 * @param {Array} arr - 起点和终点坐标数组
 * @param {string} startColor - 起点颜色
 * @param {*} endColor - 终点颜色
 * @param {*} lineWidth - 线条宽度
 * @returns - 无返回
 */
//绘制线性渐变函数
function DrawLineGradient(canvas, arr, startColor, endColor, lineWidth) {
    //创建画笔
    const context = canvas.getContext('2d');
    //创建渐变对象
    const gradient = context.createLinearGradient(arr[0], arr[1], arr[2], arr[3]);
    //添加渐变颜色
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(1, endColor);
    //应用变到填充或线条
    context.strokeStyle = gradient;
    // 重点！！！ 设置起点和终点，并绘制线条，不给点怎么画啊！
    context.moveTo(arr[0], arr[1]);
    context.lineTo(arr[2], arr[3]);
    context.lineWidth = lineWidth;
    context.stroke();
}
//1. 绘制线性渐变
const linearCanvas = CreateCanvas(400, 400); //创建画布

DrawLineGradient(linearCanvas, [100, 100, 300, 300], 'red', 'blue', 10) //绘制渐变线 

3. 绘制径向渐变 

/**
 * 
 * @param {*} canvas - 画布对象
 * @param {Array} arr - 起点,终点坐标及半径数组
 * @param {*} startColor - 起点颜色
 * @param {*} midColor - 中间颜色
 * @param {*} endColor - 终点颜色
 */
//绘制径向渐变函数
function DrawRadialGradient(canvas, arr, startColor, midColor, endColor, width, height) {
    //创建画笔
    const context = canvas.getContext('2d');
    //创建渐变对象
    const gradient = context.createRadialGradient(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6]) // 开始 x坐标,y坐标，半径 ....结束...
    //添加渐变颜色
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(0.5, midColor);
    gradient.addColorStop(1, endColor);
    //渐变赋给画笔
    context.fillStyle = gradient;
    // 重点！！！ 这个不是线，只需要填充
    context.fillRect(0, 0, width, height);

}

//2. 绘制径向渐变 
const radialCanvas = CreateCanvas(400, 400); //创建画布

DrawRadialGradient(radialCanvas, [200, 200, 0, 200, 200, 200], 'red', 'orange', 'pink', 400, 400)

4.  绘制径向渐变 

/**
 * 
 * @param {*} canvas - 画布对象
 * @param {*} angle - 弧度
 * @param {*} startColor - 起点颜色
 * @param {*} midColor - 中间颜色
 * @param {*} endColor - 终点颜色
 * @param {*} width - 填充画布宽度
 * @param {*} height - 填充画布高度
 */
//绘制锥形渐变函数
function DrawConicGradient(canvas, angle, startColor, midColor, endColor, width, height) {
    //创建画笔
    const context = canvas.getContext('2d');
    //创建渐变对象
    const gradient = context.createConicGradient(angle,width/2,height/2)
    //添加渐变颜色 颜色绘制顺序为顺时针
    gradient.addColorStop(0, startColor);
    gradient.addColorStop(0.5, midColor);
    gradient.addColorStop(1, endColor);
    //渐变赋给画笔
    context.fillStyle = gradient;
    // 重点！！！ 这个不是线，需要填充
    context.fillRect(0, 0, width, height);

}

//3. 绘制锥形渐变 
const conicCanvas = CreateCanvas(400, 400); //创建画布
// Math.PI 表示一个圆的周长与直径的比例，约为 3.141592653589793，其实就是我们所说的圆周率 π 
// 重点！！！公式：弧度 = 角度*PI/180
DrawConicGradient(conicCanvas,0*(Math.PI/180) , 'red', 'orange', 'pink', 400, 400)
// console.log(-45*(Math.PI/180))