HTML5Canvas绘图基础教程

哈喽！今天心血来潮给大家带来了《HTML5 Canvas绘图入门教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

答案：通过HTML5的canvas元素结合JavaScript可绘制图形。首先在HTML中创建canvas标签并设置宽高属性，然后用JavaScript获取2D绘图上下文ctx，接着使用fillRect、strokeRect绘制矩形，beginPath、moveTo、lineTo、closePath和fill/stroke绘制路径与形状，arc方法画圆，font、fillText/strokeText添加文字，最终实现基本图形与文本的绘制。

使用HTML5的canvas元素可以在网页上绘制图形，比如线条、形状、文字、图片等。它本身是一个空白区域，需要通过JavaScript来控制绘图操作。下面是一个简单明了的基础教程，带你快速上手Canvas绘图。

创建画布（Canvas）元素

在HTML中添加标签，设置宽度和高度。注意：一定要用属性设置宽高，而不是CSS，否则可能导致图像变形。

<canvas id="myCanvas" width="400" height="300">
  您的浏览器不支持Canvas。
</canvas>

上面代码定义了一个400×300像素的画布，如果浏览器不支持Canvas，会显示提示文字。

获取绘图上下文

Canvas本身不能直接绘图，必须通过JavaScript获取“绘图上下文”对象。2D绘图使用getContext('2d')。

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

ctx就是你的绘图工具，所有绘图操作都通过它完成。

绘制基本图形

有了上下文后，就可以开始画图了。以下是几个常见的绘图操作：

1. 绘制矩形

• ctx.fillRect(x, y, width, height)：绘制实心矩形
• ctx.strokeRect(x, y, width, height)：绘制空心矩形边框
• ctx.clearRect(x, y, width, height)：清除指定区域

ctx.fillStyle = 'blue';        // 填充颜色
ctx.fillRect(50, 50, 100, 80); // 在(50,50)处画一个100×80的蓝色矩形
<p>ctx.strokeStyle = 'red';       // 边框颜色
ctx.strokeRect(160, 50, 100, 80); // 红色边框矩形</p>

2. 绘制路径与线条

• beginPath()：开始新路径
• moveTo(x, y)：移动到某点（不画线）
• lineTo(x, y)：从当前点画线到指定点
• stroke()：描边路径
• fill()：填充路径

ctx.beginPath();
ctx.moveTo(200, 150);
ctx.lineTo(250, 100);
ctx.lineTo(300, 150);
ctx.closePath(); // 连接回起点
ctx.fillStyle = 'green';
ctx.fill();

这段代码画了一个绿色三角形。

3. 绘制圆形

ctx.beginPath();
ctx.arc(100, 150, 50, 0, 2 * Math.PI); // 圆心(100,150)，半径50，画一圈
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.stroke();

绘制文字

Canvas也可以绘制文本：

• ctx.font = '20px Arial'：设置字体
• ctx.fillText("文本", x, y)：填充文字
• ctx.strokeText("文本", x, y)：描边文字

ctx.font = '24px sans-serif';
ctx.fillStyle = 'purple';
ctx.fillText('Hello Canvas!', 10, 30);

基本上就这些。掌握这些基础操作后，你可以尝试动画、图像绘制、事件交互等更高级功能。Canvas适合做图表、小游戏、数据可视化等场景。关键是多练习，动手改参数看效果。

好了，本文到此结束，带大家了解了《HTML5Canvas绘图基础教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！