title: CanvasContext.createLinearGradient header: develop nav: api

sidebar: canvas_CanvasContext-createLinearGradient

解释：创建一个线性的渐变颜色。

方法参数

参数名 属性 必填 默认值 说明
x0 Number 是 起点的 x 坐标
y0 Number 是 起点的 y 坐标
x1 Number 是 终点的 x 坐标
y1 Number 是 终点的 y 坐标

示例

在开发者工具中预览效果

扫码体验

sidebar: canvas_CanvasContext-createLinearGradient - 图1 请使用百度APP扫码

图片示例

图片

代码示例

:::codeTab

  1. const canvasContext = this.createCanvasContext('myCanvas');
  3. // Create linear gradient
  4. const grd = canvasContext.createLinearGradient(0, 0, 200, 0);
  5. grd.addColorStop(0, 'blue');
  6. grd.addColorStop(1, 'red');
  8. // Fill with gradient
  9. canvasContext.setFillStyle(grd);
  10. canvasContext.fillRect(30, 30, 150, 80);
  11. canvasContext.draw();

:::