🎨今天给大家带来的是使用HTML5中的``标签进行绘图的几个小例子，让我们一起走进这个神奇的世界吧！🚀

🌈圆形绘制：

首先，我们来尝试一下如何用JavaScript代码在画布上绘制一个圆形。通过设置`arc()`方法的参数，可以轻松实现。🎨

```javascript

let canvas = document.getElementById('myCanvas');

let ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.arc(75, 75, 50, 0, Math.PI 2, true);

ctx.stroke();

```

🌟线条绘制：

接着，让我们试试如何画一条直线。这非常简单，只需要调用`moveTo()`和`lineTo()`方法，并用`stroke()`来完成绘制。📏

```javascript

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(200, 200);

ctx.stroke();

```

💫文本添加：

最后，我们还可以给画布添加一些文字说明。通过设置字体样式和颜色，然后使用`fillText()`方法即可。📖

```javascript

ctx.font = '30px Arial';

ctx.fillText("Hello Canvas!", 50, 100);

```

🎉这些只是冰山一角，``标签还有更多强大的功能等待你去探索！希望这篇简单的介绍能够激发你的兴趣，让你开始动手实践吧！💡

Canvas 编程 前端开发