如何在 HTML5 画布上绘制模糊的圆形？-JavaScript中文网-JavaScript教程资源分享门户

HTML5 画布是一个非常强大的工具，可以用来创建各种图形和动画。在本文中，我们将探讨如何在 HTML5 画布上绘制模糊的圆形。

Step 1: 创建 Canvas

首先，我们需要创建一个 HTML5 画布元素。以下是一个示例代码片段：

<canvas id="myCanvas"></canvas>

在 JavaScript 中，我们可以使用 getContext() 方法来获取绘图上下文对象。我们需要获取 2d 上下文，因为我们要绘制 2D 图形。以下是一个示例代码片段：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

现在我们已经准备好了开始绘制模糊的圆形了！

Step 2: 绘制模糊的圆形

我们可以使用 ctx.arc() 方法来绘制圆形，然后使用 ctx.fill() 方法来填充圆形。但是，这样绘制出来的圆形是清晰的，而且看起来很简单。如果您想让圆形变得更有趣和有吸引力，您可以尝试以下方法之一：

方法 1: 使用阴影

您可以使用 ctx.shadowBlur 属性来添加阴影效果。以下是一个示例代码片段：

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "blue";
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.fill();

方法 2: 使用径向渐变

您也可以使用 ctx.createRadialGradient() 方法来创建一个径向渐变，并将其用作填充颜色。以下是一个示例代码片段：

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
const gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 50);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fill();

Step 3: 总结

通过本文，我们已经学习了如何在 HTML5 画布上绘制模糊的圆形。我们可以使用阴影和径向渐变来让圆形变得更有趣和吸引力。希望这篇文章对你有所帮助！

参考代码：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ------------- --------------
-------
------
  ------- -----------------------
  --------
    ----- ------ - ------------------------------------
    ----- --- - ------------------------

    -- -- ------
    ----------------
    ------------ ---- --- -- ------- - ---
    ------------- - -------
    -------------- - ---
    --------------- - --------
    -----------

    -- -- --------
    ----------------
    ------------ ---- --- -- ------- - ---
    ----- -------- - ----------------------------- ---- --- ---- ---- ----
    ------------------------ --------
    ------------------------ ---------
    ------------- - ---------
    -----------
  ---------
-------
-------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/29600