HTMLCanvas如何绘制图形_HTMLCanvas图形绘制入门

HTMLCanvas通过JavaScript绘制图形，需先创建canvas标签并获取2D上下文。使用fillRect、strokeRect绘制矩形，beginPath结合moveTo、lineTo绘制路径，arc绘制圆形，通过fillStyle、strokeStyle设置颜色，lineWidth设置线宽，globalAlpha设置透明度，掌握这些基础可实现复杂图形与动画。

HTMLCanvas 是网页中绘制图形的强大工具，通过 JavaScript 控制 canvas 元素，可以绘制线条、形状、文字甚至动画。掌握基础绘图方法是前端可视化、游戏开发等方向的重要一步。

创建 Canvas 画布

使用 canvas 标签在 HTML 中定义绘图区域。需设置宽度和高度，否则默认尺寸较小。

<canvas id="myCanvas" width="400" height="300"></canvas>

JavaScript 中通过 getElementById 获取上下文，才能进行绘图操作。

立即学习“前端免费学习笔记（深入）”；

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

绘制基本图形

2D 上下文提供了多种方法来绘制常见图形，以下是几个常用操作。

绘制矩形

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

例如：

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 80);

绘制路径（线条与多边形）

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

65

查看详情

通过路径可绘制任意形状。开始路径后，使用 moveTo 和 lineTo 定义点，最后用 stroke 或 fill 渲染。

示例：绘制三角形

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(75, 100);
ctx.closePath();
ctx.stroke();

绘制圆形与弧线

使用 arc() 方法绘制圆或弧。语法为 arc(x, y, radius, startAngle, endAngle, anticlockwise)。

绘制完整圆示例：

ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.stroke();

填充颜色可用 fillStyle，描边用 strokeStyle。

样式与描边设置

绘图前可设置颜色、线宽、透明度等样式。

• ctx.fillStyle = 'red'：设置填充色
• ctx.strokeStyle = 'green'：设置边框色
• ctx.lineWidth = 5：设置线条粗细
• ctx.globalAlpha = 0.5：设置透明度

这些属性应在绘制前设定，否则不会生效。

基本上就这些。熟悉这些基础方法后，可以组合出复杂图形，为进一步学习动画或交互打下基础。不复杂但容易忽略细节，比如 beginPath 的使用和坐标系统的理解。

以上就是HTMLCanvas如何绘制图形_HTMLCanvas图形绘制入门的详细内容，更多请关注php中文网其它相关文章！