HTML 画布 - 添加样式

上一页
下一页

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

线条样式

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

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

序号 属性和描述 示例图像
1

lineWidth

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

 LineWidth
2

lineCap

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

 LineCap
3

lineJoin

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

 LineJoin
4

miterLimit

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

 MiterLimit
5

lineDashOffset

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

 LineDashOffset

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

  • 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>

输出

以下代码的输出如下所示。

Styles to Lines

示例

以下代码演示了 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>

输出

以下代码的输出为

Styles to Lines Example

示例

以下示例使用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>

输出

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

SetLineDash

渐变

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

序号 方法和描述
1

createLinearGradient(x1, y1, x2, y2)

创建一个线性渐变对象，其起点为 (x1,y1)，终点为 (x2,y2)。
2

createRadialGradient(x1, y1, r1, x2, y2, r2)

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

createConicGradient(angle, x, y)

要创建锥形渐变对象，可以使用此方法，该方法将起始角度（以弧度表示）和位置点 (x, y) 作为参数。

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

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

示例 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>

输出

从以上代码生成的线性渐变对象为

Gradients

示例 2（径向渐变）

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

<!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>

输出

以上代码生成的输出为

Example Radial-Gradient

示例 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>

输出

以上代码生成的渐变对象为

Example Conic Gradient

图案

在画布上绘制绘画。因此，在 HTML5 中创造了画布元素这个名称。画布元素可用于使用图案方法绘制和设计各种图案，这些图案非常吸引人，并且具有巨大的应用。它通常用于室内房屋设计。可以使用此属性在画布元素上绘制图像图案。用于创建图案的方法如下所示

createPattern(image, type)

此方法创建一个画布图案对象，该对象在画布内的给定空间中多次生成图像。参数“image”将图像和视频作为输入，并将其制成图案。“type”参数有四个可能的字符串输入，列在下面

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

  • repeat-x - 图像仅在画布元素上水平重复。

  • 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://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>

输出

以上代码生成的图案如下所示

Patterns

阴影

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

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

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

  • shadowBlur - 它指示阴影应模糊到什么程度。它采用浮点值作为输入。默认值为 0，它不指示像素数。

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

示例

以下示例演示了三种不同形状中阴影的 shadowOffsetX 和 shadowOffsetY 属性。第一个正方形显示了如何使用 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>

输出

以上代码生成的阴影为

Shadows

示例

以下代码将 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>

输出

以上代码的输出为

Example Shadows
打印页面
上一页
下一页
广告