CanvasGradient.addColorStop

解释:创建一个颜色的渐变点。

# 方法参数

Number stop, Color color

# stop参数说明

表示渐变点在起点和终点中的位置,取值(0-1)。

# color参数说明

渐变点的颜色

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

图片

# 代码示例

    <canvas canvas-id="myCanvas" class="myCanvas" />
    
    Page({
        onLoad() {
            const canvasContext = swan.createCanvasContext('myCanvas');
    
            // Create circular gradient
            const grd = canvasContext.createLinearGradient(30, 10, 120, 10);
            grd.addColorStop(0, 'red');
            grd.addColorStop(0.16, 'orange');
            grd.addColorStop(0.33, 'yellow');
            grd.addColorStop(0.5, 'green');
            grd.addColorStop(0.66, 'cyan');
            grd.addColorStop(0.83, 'blue');
            grd.addColorStop(1, 'purple');
    
            // Fill with gradient
            canvasContext.setFillStyle(grd);
            canvasContext.fillRect(30, 30, 150, 80);
            canvasContext.draw();
        }
    });
    

    # Bug & Tip

    bug:addColorStop 目前在 Android 有 bug。