CanvasGradient.addColorStop

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

方法参数

Number stop, Color color

stop参数说明

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

color参数说明

渐变点的颜色

示例

在开发者工具中预览效果

扫码体验

CanvasGradient.addColorStop - 图1请使用百度APP扫码

图片示例

图片

代码示例

  1. const canvasContext = swan.createCanvasContext('myCanvas');
  2. // Create circular gradient
  3. const grd = canvasContext.createLinearGradient(30, 10, 120, 10);
  4. grd.addColorStop(0, 'red');
  5. grd.addColorStop(0.16, 'orange');
  6. grd.addColorStop(0.33, 'yellow');
  7. grd.addColorStop(0.5, 'green');
  8. grd.addColorStop(0.66, 'cyan');
  9. grd.addColorStop(0.83, 'blue');
  10. grd.addColorStop(1, 'purple');
  11. // Fill with gradient
  12. canvasContext.setFillStyle(grd);
  13. canvasContext.fillRect(30, 30, 150, 80);
  14. canvasContext.draw();

Bug & Tip

bug:addColorStop 目前在 Android 有bug。