当前位置：文江博客知识库简体中文文档 Web API CanvasRenderingContext2D createLinearGradient

CanvasRenderingContext2D.createLinearGradient() - Web API 接口参考编辑

CanvasRenderingContext2D.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。

该方法返回一个线性 CanvasGradient对象。想要应用这个渐变，需要把这个返回值赋值给 fillStyle 或者 strokeStyle。

语法

CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);

createLinearGradient() 方法需要指定四个参数，分别表示渐变线段的开始和结束点。

参数

x0: 起点的 x 轴坐标。
y0: 起点的 y 轴坐标。
x1: 终点的 x 轴坐标。
y1: 终点的 y 轴坐标。

返回值

CanvasGradient: 一个根据指定线路初始化的线性 CanvasGradient 对象。

示例

使用线性渐变填充一个矩形

这个例子使用createLinearGradient() 方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
var gradient = ctx.createLinearGradient(20,0, 220,0);

// Add three color stops
gradient.addColorStop(0, 'green');
gradient.addColorStop(.5, 'cyan');
gradient.addColorStop(1, 'green');

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

结果

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="编辑" />
  <input id="reset" type="button" value="重置" />
</div>
<textarea id="code" class="playable-code">
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"white");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范描述

规范	状态	备注
HTML Living Standard CanvasRenderingContext2D.createLinearGradient	Living Standard

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.