HTML Canvas - addColorStop() 方法

HTML Canvas 的addColorStop()方法可以用来向Canvas元素上渲染的图形的某一部分添加新的颜色。

它属于canvasGradient接口，所有渐变类型都使用它来在Canvas元素上图形的特定位置提供颜色输入。

语法

以下是HTML Canvas addColorStop()方法的语法：

canvasGradient.addColorStop(offset_value, color);

参数

以下是此方法的参数列表：

序号	参数及描述
1	offset_value 它取值为'0'到'1'（包含'0'和'1'），表示颜色停止点的位置。'0'表示渐变的起点，'1'表示终点。
2	color 使用指定的offset_value应用的颜色。

序号

参数及描述

offset_value

它取值为'0'到'1'（包含'0'和'1'），表示颜色停止点的位置。'0'表示渐变的起点，'1'表示终点。

color

使用指定的offset_value应用的颜色。

返回值

它将渐变色应用到Canvas元素上绘制的图形上，并将结果直接渲染到画布上。

示例1

以下示例使用HTML Canvas addColorStop()方法在Canvas元素上绘制一个简单的渐变图案图形。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var grad = context.createLinearGradient(0, 0, 200, 100);
      context.fillStyle = grad;
      grad.addColorStop(0.3, 'blue');
      grad.addColorStop(0.5, 'grey');
      grad.addColorStop(0.7, 'purple');
      context.fillRect(30, 10, 190, 80);
   </script>
</body>
</html>

输出

以上代码在网页上返回的输出如下：

示例2

以下程序在Canvas元素上绘制一个矩形，并使用addColorStop()方法应用颜色图案。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var grad = context.createLinearGradient(0, 0, 200, 100);
      context.fillStyle = grad;
      grad.addColorStop(0.25, 'purple');
      grad.addColorStop(0.90, 'cyan');
      context.fillRect(30, 10, 190, 80);
   </script>
</body>
</html>

输出

以上代码在网页上返回的输出如下：

html_canvas_colors_and_styles.htm

打印页面