如何在HTML5中绘制自定义形状-之路教程

HTML5中的自定义形状

我们可以在Canvas元素的帮助下在HTML5中创建自定义形状。
它可以在BeginPath()和ClosePath()方法的帮助下实现。

如何在HTML5中绘制自定义形状

在HTML5中绘制自定义形状示例

<!doctype html>

 <html>

 <body>

 <canvas id="shape">

 </canvas>

 <script type="text/javascript">

     var can1 = document.getElementById("shape");

     var can2 = can1.getContext("2d");

     can2.fillStyle = "#00ff11";

     can2.strokeStyle = "red";

     can2.lineWidth = 4;

     can2.beginPath();

     can2.moveTo(20, 20);

     can2.lineTo(120, 60);

     can2.lineTo(160, 90);

     can2.lineTo(10, 120);

     can2.lineTo(20, 20);

     can2.fill();

     can2.stroke();

     can2.closePath();

 </script>

 </body>

 </html>

说明

如果我们想展示自定义形状的阴影，它也通过Canvas元素实现。

为此目的，我们必须使用Canvas元素的"ShadowColor"属性，并且必须为其分配一个值。

因此，我们必须在上面的程序中添加以下代码

can2.shadowOffsetX = 10;

can2.shadowOffsetY = 20;

can2.shadowBlur = 4;

can2.fillStyle = "#00ff11";

can2.shadowColor = "#ee1100";

日期：2020-04-11 23:04:05 来源：oir作者：oir

←如何使用HTML5画布绘制矩形

如何使用HTML5画布绘制形状→

HTML5中的自定义形状

在HTML5中绘制自定义形状示例

说明

目录