HTML Canvas - fillStyle 属性

HTML Canvas 的fillStyle 属性来自 Canvas 2D API 的CanvasRenderingContext2D 接口，它接收上下文对象形状，并用传入的颜色值填充它。

它主要指定在任何形状内部使用的颜色、渐变或图案。默认颜色为“黑色”。

可能的输入值

此属性接受以下任何一个值：

任何格式的 CSS 颜色值。
用于添加到形状内部的渐变对象。
用于在形状内部创建重复图案的图案对象。

示例

下面的程序在 Canvas 元素内绘制一个矩形，并使用 HTML Canvas 的fillStyle 属性进行填充。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="300" height="250" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.fillStyle = 'blue';
         context.rect(35, 35, 200, 150);
         context.fill();
      </script>
   </body>
</html>

输出

上述代码在网页上返回的输出为：

示例

下面的程序在 Canvas 元素内绘制一个矩形，并使用fillStyle 属性填充一个创建的图案。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="300" height="250" style="border: 1px solid black; background-color: blue;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d')
         var image = new Image();
         image.src = 'https://tutorialspoint.com/themes/home/tp-diamond-logo-white.png';
         image.onload = function() {
            var pattern = context.createPattern(image, 'repeat');
            context.fillStyle = pattern;
            context.fillRect(0, 0, canvas.width, canvas.height);
         }
      </script>
   </body>
</html>

输出

上述代码在网页上返回的输出为：

示例

下面的程序在 Canvas 元素内绘制一个矩形，并使用fillStyle 属性填充一个渐变对象。

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

输出

上述代码在网页上返回的输出为：

html_canvas_rectangles.htm

打印页面