HTML Canvas - 添加样式

与颜色类似，我们还可以向 HTML5 Canvas 中提供的不同形状添加各种样式。让我们一一看看。

样式到线条

在 HTML5 中绘制线条的一种方法是使用 lineTo 路径元素。我们还可以使用各种样式属性来美化这些线条。

由于我们在画布上创建的大多数对象都是使用线条绘制的，因此我们可以使用线条属性来设计这些对象。下表列出了用于样式线的属性。

序列号 属性及描述 示例图片
1

线宽

可以使用此属性指定所绘制线条的宽度。任何线条的粗细值默认为 1 个单位。

 行宽
2

线帽

该属性通常用于设置线条末端的样式。该属性有三个可接受的输入值，即“butt”、“round”和“square”。默认值始终是“butt”。

 线帽
3

线路连接

当两条线即将连接时，该属性可用于设置线连接角的外观。该属性接受的值为“miter”、“bevel”和“round”。该属性的默认值为“miter”。该属性不会影响线条，因为没有添加连接区域。

 线路连接
4

斜接限制

当两个角度以锐角连接时，使用该属性来更改连接处的厚度。此属性确定内部连接点可以放置到的外部连接的距离。默认值为 10，但可能的值完全取决于所使用的线路。

 斜接限制
5

线段偏移量

这指定了线条的虚线图案。这用于制作点线和虚线图案。我们还可以在 setLineDash() 方法中使用它并创建动画效果。

 线虚线偏移

除了这些属性之外，还可以使用另外两种方法来应用线条样式。

  • getLineDash() 方法- 返回包含偶数个正数的当前线破折号模式。

  • setLineDash() 方法- 要设置虚线以使用 Canvas 创建形状或图案，请使用此方法。它将段数组作为输入，其中包含一些行值。如果未给出任何内容，则会给出一条简单的描边线作为输出。

例子

以下代码演示了 lineWidth 和 lineCap 属性。下面给出实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Styling lines</title>
      <style></style>
   </head>
   <body onload="linestyles();">
      <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function linestyles() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            // lineWidth property
            context.moveTo(30, 30);
            context.lineTo(30, 150);
            context.lineWidth = 5;
            context.stroke();
            // linecap round property
            context.beginPath();
            context.moveTo(80, 30);
            context.lineTo(80, 150);
            context.lineWidth = 10;
            context.lineCap = 'round';
            context.stroke();
            context.closePath();
            // linecap butt property
            context.beginPath();
            context.moveTo(130, 30);
            context.lineTo(130, 150);
            context.lineWidth = 10;
            context.lineCap = 'butt';
            context.stroke();
            context.closePath();
            // linecap square property
            context.beginPath();
            context.moveTo(180, 30);
            context.lineTo(180, 150);
            context.lineWidth = 10;
            context.lineCap = 'square';
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

下面给出了以下代码的输出。

样式到线条

例子

以下代码演示了 lineJoin 和 miterlimit 属性。miterlimit 属性分别用值“2 个单位”和“20 个单位”进行演示。代码如下。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Styling lines</title>
      <style></style>
   </head>
   <body onload="linestyles();">
      <canvas id="canvas" width="600" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function linestyles() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            // linejoin round property
            context.moveTo(30, 30);
            context.lineTo(30, 150);
            context.lineTo(150, 150);
            context.lineTo(150, 30);
            context.lineJoin = 'round';
            context.lineWidth = 10;
            context.stroke();
            // linejoin bevel property
            context.beginPath();
            context.moveTo(200, 30);
            context.lineTo(200, 150);
            context.lineTo(320, 150);
            context.lineTo(320, 30);
            context.lineJoin = 'bevel';
            context.lineWidth = 10;
            context.stroke();
            context.closePath();
            // linejoin miter property
            context.beginPath();
            context.moveTo(370, 30);
            context.lineTo(370, 150);
            context.lineTo(490, 150);
            context.lineTo(490, 30);
            context.lineJoin = 'miter';
            context.lineWidth = 10;
            context.stroke();
            context.closePath();
            // miterlimit property with value 2
            context.beginPath();
            context.moveTo(50, 200);
            context.lineTo(120, 350);
            context.lineTo(190, 200);
            context.miterLimit = 2;
            context.lineJoin = 'miter';
            context.lineWidth = 25;
            context.stroke();
            context.closePath();
            // miterlimit property with value 20
            context.beginPath();
            context.moveTo(250, 200);
            context.lineTo(320, 350);
            context.lineTo(390, 200);
            context.miterLimit = 20;
            context.lineJoin = 'miter';
            context.lineWidth = 25;
            context.stroke();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

以下代码给出的输出为

样式到线条示例

例子

以下示例使用setLineDash方法和lineDashOffset属性值来指定使用线条绘制形状的碟形图案。下面给出实现代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Styling lines</title>
      <style></style>
   </head>
   <body onload="linestyles();">
      <canvas id="canvas" width="350" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function linestyles() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            var offset = 0;

            function draw() {
               ctx.clearRect(0, 0, canvas.width, canvas.height);
               ctx.setLineDash([50, 10]);
               ctx.lineDashOffset = offset;
               ctx.strokeRect(10, 10, 250, 125);
            }

            function animate() {
               offset++;
               if (offset > 25) {
                  offset = 0;
               }
               draw();
               setTimeout(animate, 50);
            }
            animate();
         }
      </script>
   </body>
</html>

输出

该代码返回输出，如下所示。将代码粘贴到编辑器中即可查看动画效果。

设置线划线

渐变

我们可以使用渐变简单地填充和描边形状，就像在 Canvas 元素上绘制形状一样。Canvas 中提供三种类型的渐变，它们是线性、径向和圆锥形。我们可以使用三种方法创建渐变对象。下表列出了每种方法。

序列号 方法及说明
1

创建线性渐变（x1，y1，x2，y2）

创建起点为 (x1,y1) 且终点为 (x2,y2) 的线性渐变对象。
2

创建径向渐变（x1，y1，r1，x2，y2，r2）

该方法用于创建径向渐变对象。它以两个圆为参数，其中第一个圆半径为r1，圆心坐标为(x1,y1)。第二个圆的半径为r2，圆心坐标为(x2,y2)。
3

创建圆锥渐变（角度，x，y）

要创建圆锥渐变对象，请使用此方法，该方法以弧度为单位的起始角度和位置点 (x, y) 作为参数。

创建画布渐变对象后，我们可以使用 addColorStop() 方法为其着色。其语法和参数如下所示。

Canvas.addColorStop(position, color) - 它为创建的画布对象创建一个色标。参数位置采用 0 到 1 之间的值，定义渐变中颜色的位置。颜色参数是渲染到渐变对象的颜色输入。单个渐变对象的色标数量没有限制。

示例1（线性渐变）

下面的例子展示了如何实现线性渐变。代码如下。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gradients</title>
      <style></style>
   </head>
   <body onload="gradients();">
      <canvas id="canvas" width="500" height="300" style="border: 1px solid black;"></canvas>
      <script>
         function gradients() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            // linear gradient
            var lineargrad = context.createLinearGradient(0, 0, 200, 100);
            context.fillStyle = lineargrad;
            lineargrad.addColorStop(0, 'orange');
            lineargrad.addColorStop(0.5, 'white');
            lineargrad.addColorStop(1, 'green');
            context.fillRect(10, 10, 190, 80);
         }
      </script>
   </body>
</html>

输出

由上述代码形成的线性渐变对象是

渐变

示例 2（径向渐变）

以下代码演示了如何在 Canvas 元素中实现径向渐变。我们取两个具有相同中心但不同半径和颜色的圆来显示渐变。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gradients</title>
      <style></style>
   </head>
   <body onload="gradients();">
      <canvas id="canvas" width="400" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function gradients() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var radialgrad = context.createRadialGradient(150, 150, 25, 150, 150, 100);
            radialgrad.addColorStop(0, 'orange');
            radialgrad.addColorStop(1, 'blue');
            context.fillStyle = radialgrad;
            context.fillRect(10, 10, 300, 300);
         }
      </script>
   </body>
</html>

输出

上述代码生成的输出是

径向渐变示例

示例3（圆锥梯度）

以下示例展示了圆锥渐变如何构建看起来像 3D 元素的渐变对象。它实际上是一个二维形状。下面给出实现。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gradients</title>
      <style></style>
   </head>
   <body onload="gradients();">
      <canvas id="canvas" width="400" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function gradients() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var conicgradient = context.createConicGradient(2, 62, 75);
            conicgradient.addColorStop(0, 'white');
            conicgradient.addColorStop(0.75, 'black');
            context.fillStyle = conicgradient;
            context.fillRect(12, 25, 200, 150);
         }
      </script>
   </body>
</html>

输出

上述代码形成的渐变对象为

圆锥曲线示例

图案

绘画是在画布上绘制的。因此，Canvas 元素这个名称是在 HTML5 中创造的。Canvas元素可以用图案的方法来绘制和设计各种图案，非常吸引人，有着巨大的应用前景。它常用于室内设计。可以通过 Canvas 元素上的此属性绘制图像图案。下面给出了用于创建模式的方法

创建模式（图像，类型）

此方法创建一个 Canvas 图案对象，该对象在 Canvas 内的给定空间中多次生成图像。参数“image”将图像和视频作为输入并使其成为模式。“type”参数有四种可能的字符串输入，如下所示

  • 重复- 这会在水平和垂直位置打印输入图像。

  • Repeat-x - 图像仅在 Canvas 元素上水平重复。

  • Repeat-y - 图像垂直重复，但水平不重复。

  • no-repeat - 图像不重复且仅使用一次。

此方法仅在调用之前加载图像时有效。如果未加载图像，则图案绘制不正确，这可能会导致一些错误，导致图案不显示。

例子

让我们使用该方法创建一个模式。下面展示了实现

<html lang="en">
   <head>
      <title>Pattern</title>
      <style>
         #canvas {
            background-color: black;
         }
      </style>
   </head>
   <body onload="pattern();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function pattern() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d')
            var image = new Image();
            image.src = 'https://www.tutorialspoint.com/themes/home/tp-diamond-logo-white.png';
            image.onload = function() {
               // change type parameter in the method to see how the pattern is displayed.
               var pattern = context.createPattern(image, 'repeat');
               context.fillStyle = pattern;
               context.fillRect(0, 0, canvas.width, canvas.height);
            }
         }
      </script>
   </body>
</html>

输出

上述代码生成的模式如下

图案

阴影

阴影使 Canvas 元素内绘制的形状更加生动。可以将四个属性应用于 Canvas 元素以使用阴影。它们列在下面

  • ShadowOffsetX - 该属性采用浮点值并指示阴影与形状的水平距离。默认值为 0，属性值不受变换矩阵的影响。使用负值会使阴影移动到形状的左侧。

  • ShadowOffsetY - 此属性指示阴影必须垂直延伸的距离。它采用浮点值，默认值为 0。使用负值会使阴影移动到顶部。与上面的属性一样，它不受变换矩阵的影响。

  • ShadowBlur - 它指示阴影的模糊程度。它将浮点值作为输入。默认值为0，不表示像素数。

  • ShadowColor - 它采用标准 CSS 颜色作为输入并将其应用于阴影效果。默认为透明黑色。

例子

以下示例演示了三种不同形状的阴影的阴影偏移 X 和 Y 属性。第一个方块显示如何使用shadowOffsetX，第二个方块显示如何实现shadowOffsetY，第三个方块使用这两个属性。代码如下。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>shadow</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="shadow();">
      <canvas id="canvas" width="555" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function shadow() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // using shadow offset x
            context.beginPath();
            context.shadowOffsetX = 20;
            context.shadowColor = 'grey';
            context.rect(50, 50, 75, 75);
            context.fillStyle = 'blue';
            context.fill();
            context.closePath();
            // using shadow offset y
            context.beginPath();
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 20;
            context.shadowColor = 'grey';
            context.rect(200, 50, 75, 75);
            context.fillStyle = 'green';
            context.fill();
            context.closePath();
            // using shadow offset x and y
            context.beginPath();
            context.shadowOffsetX = 30;
            context.shadowOffsetY = 30;
            context.shadowColor = 'grey';
            context.rect(350, 50, 75, 75);
            context.fillStyle = 'violet';
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

输出

上述代码形成的阴影是

阴影

例子

以下代码实现了 Canvas 元素的shadowBlur 和shadowColor 属性。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>shadow</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="shadow();">
      <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function shadow() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.shadowOffsetX = 20;
            context.shadowOffsetY = 20;
            context.shadowBlur = 10;
            context.shadowColor = 'red';
            context.arc(90, 90, 50, 1 * Math.PI, 5 * Math.PI);
            context.fillStyle = 'black';
            context.fill();
         }
      </script>
   </body>
</html>

输出

上述代码的输出是

阴影示例