绘制图形_定义线性渐变色

1. ctx.createLinearGradient(x0, y0, x1, y1)：定义渐变线的起点终点，确定颜色渐变方向，返回一个CanvasGradient对象

   • x0：是起点的横坐标
   • y0：是起点的纵坐标
   • x1：是终点的横坐标
   • y1：是终点的纵坐标

2. CanvasGradient.addColorStop(num,color)：指定渐变点的颜色

   • num：第一个参数是0到1之间的一个数字，代表渐变点的位置，0表示起点，1表示终点
   • color：表示该渐变点的颜色

3. 使用定义好的渐变色。

xxxxxxxxxx
        // 创建渐变        
        var grd = ctx.createLinearGradient(0, 300, 300, 0);
        grd.addColorStop(0, "red");
        grd.addColorStop(0.5, "yellow");
        grd.addColorStop(1, "pink");
        // 绘制矩形
        ctx.rect(0, 0, 300, 300)
        // 设置填充颜色为渐变色
        ctx.fillStyle = grd
        ctx.fill()

实时效果反馈

1.下列描述错误的是：

A ctx.createLinearGradient(0, 0, 300, 300)渐变方向为由左上到右下

B ctx.createLinearGradient(0, 300)创建线性渐变对象

答案

1=>B