HTML Canvas - 颜色

上一页
下一页

在上一章中，我们刚刚关注了使用基本样式在 Canvas 上绘制图形。在本章和下一章中，我们将重点介绍如何通过使用各种样式使图形和 Canvas 元素更具吸引力。

我们可以对 Canvas 元素和在其内部绘制的图形执行各种操作以使其更具吸引力。我们使用样式和颜色来实现所需图形的概念列在下面。每个属性都有其自身的功能和用途。我们将在接下来的页面中清楚地了解每个属性。

  • 颜色

  • 透明度

  • 线条样式

  • 渐变

  • 图案

  • 阴影

颜色

到目前为止，我们已经了解了如何在 Canvas 元素上绘制图形。现在我们将了解如何为绘制的图形添加颜色。

用于将颜色应用于 Canvas 元素的属性列在下表中。

序号 属性及描述
1

fillStyle

此属性用于填充图形内部的颜色。
2

strokeStyle

此属性用于为图形轮廓着色。

颜色属性可以用四种类型赋值

  • 直接给出颜色的名称

    例如 - 'green'，'blue'

  • 使用十六进制值给出颜色输入。所有颜色都在 #000000 到 #ffffff 的范围内。

  • 使用 RGB 值给出颜色。

    例如 - rgb(0,5,10)。所有颜色的值都在 rgb(0,0,0) 到 rgb(255,255,255) 之间。

  • 使用 RGBA 值给出颜色输入。

    例如 - rgba(0,100,200,1)

    其中

    • r - 红色分量

    • g - 绿色分量

    • b - 蓝色分量

    • a - 不透明度值。该值分别在 0 和 1 之间。

示例

以下示例演示了圆形上的 fillStyle 属性和正方形上的 strokeStyle 属性。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Color</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="color();">
      <canvas id="canvas" width="400" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function color() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // fillStyle for circle
            context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
            context.fillStyle = 'green';
            context.fill();
            // strokeStyle for square
            context.beginPath();
            context.rect(250, 65, 75, 75);
            context.strokeStyle = 'red';
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

使用颜色属性时需要注意的一点是，当赋予任何属性时，它都会应用于 Canvas 中的整个图形。要使属性仅适用于指定的图形，我们必须对图形使用 beginPath() 和 closePath()。以上代码的输出为

Colors

透明度

有时用户需要使他的图形透明。Canvas 配备了半透明属性，可以通过使用 globalAlpha 属性或简单地使用颜色属性中的 'rgba' 为 Canvas 指定透明度来实现。

用于使 Canvas 元素透明的属性是 globalAlpha。语法如下所示

Canvas.globalAlpha = transparency_value

透明度值介于 0 和 1 之间，其中 0 表示图形完全透明，1 表示图形不透明。对于 Canvas 元素中的任何图形，默认情况下透明度值为 1（不透明）。

使用 globalAlpha 的示例

以下示例采用填充红色颜色的相同正方形，并演示了它们在不同 globalAlpha 水平下的透明度。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transparency</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="transparency();">
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function transparency() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // square with 0.25 transparency
            context.beginPath();
            context.rect(50, 50, 75, 75);
            context.globalAlpha = 0.25;
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
            // square with 0.5 transparency
            context.beginPath();
            context.rect(150, 50, 75, 75);
            context.globalAlpha = 0.5;
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
            // square with 0.75 transparency
            context.beginPath();
            context.rect(250, 50, 75, 75);
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
            // square with 1 transparency
            context.beginPath();
            context.rect(350, 50, 75, 75);
            context.globalAlpha = 1;
            context.fillStyle = 'red';
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

以下代码的输出为

Example Using GlobalAlpha

使用颜色属性的示例

我们在 Canvas 颜色属性中使用 rgba 颜色，并在以下示例中演示颜色属性。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transparency</title>
      <style></style>
   </head>
   <body onload="transparency();">
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function transparency() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.rect(50, 50, 400, 100);
            context.strokeStyle = 'black';
            context.stroke();
            context.beginPath();
            context.rect(50, 50, 100, 100);
            context.fillStyle = 'rgba(0,0,255,1)';
            context.fill();
            context.closePath();
            context.beginPath();
            context.rect(50, 50, 200, 100);
            context.fillStyle = 'rgba(0,0,255,0.75)';
            context.fill();
            context.closePath();
            context.beginPath();
            context.rect(50, 50, 300, 100);
            context.fillStyle = 'rgba(0,0,255,0.50)';
            context.fill();
            context.closePath();
            context.beginPath();
            context.rect(50, 50, 400, 100);
            context.fillStyle = 'rgba(0,0,255,0.25)';
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

以下代码的输出为

Example Using Color Properties

在 Canvas 中填充颜色的规则

我们在前面的章节中多次使用了 fill() 方法，它不带任何参数。我们可以向函数中包含参数以创建一些复杂的填充图形。在使用 fill() 时，我们可以选择提供一个特定的算法来确定点位置以及是否填充它。可以传递两种类型的值给函数，如下所示。

  • nonzero - 这是 fill 函数的默认规则，它找出点或图形是否位于路径外部，但会填充所有可用的对象。

  • evenodd - 这会找出是否填充路径中可用的图形或区域，并以奇偶方式填充路径中可用的图形。

示例

让我们制作两个嵌套的正方形，并找出每个值是如何工作的。实现代码如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>canvas fill rules</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="fill();">
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function fill() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // using nonzero
            context.beginPath();
            context.rect(95, 60, 60, 60);
            context.rect(50, 20, 150, 150);
            context.lineWidth = 5;
            context.strokeStyle = 'red';
            context.stroke();
            context.fillStyle = 'yellow';
            context.fill('nonzero');
            context.closePath();
            // using evenodd
            context.beginPath();
            context.rect(345, 60, 60, 60);
            context.rect(300, 20, 150, 150);
            context.lineWidth = 5;
            context.strokeStyle = 'red';
            context.stroke();
            context.fillStyle = 'yellow';
            context.fill('evenodd');
            context.closePath();
         }
      </script>
   </body>
</html>

输出

以上代码的输出为

Rules to Fill Colors
打印页面
上一页
下一页
广告

© . All rights reserved.