目录
前言
绘制矩形与三角形的基本步骤
路径绘制与颜色设置
填充与描边的使用
常见问题解答（FAQ）
示例代码
相似概念对比
前言
Canvas是HTML5中用于绘制图形的强大工具，通过JavaScript可以实现各种复杂的图形绘制。本文将围绕Canvas绘制矩形和三角形展开，详细讲解路径绘制、颜色设置、填充与描边等核心知识点，并通过代码示例和FAQ解答常见问题，帮助开发者更好地掌握Canvas图形绘制技术。
绘制矩形与三角形的基本步骤
在Canvas中绘制矩形和三角形的基本步骤如下：
初始化Canvas上下文
使用getContext('2d')方法获取Canvas的2D绘图上下文。
设置路径
使用beginPath()方法开始绘制路径，并通过moveTo()和lineTo()方法定义图形的顶点坐标。
闭合路径
使用closePath()方法闭合路径，确保图形完整。
设置样式
使用strokeStyle和fillStyle设置描边和填充颜色。
绘制图形
使用stroke()方法绘制描边，使用fill()方法填充颜色。
路径绘制与颜色设置
路径绘制
路径绘制是Canvas图形绘制的核心步骤。以下是一个绘制矩形的示例代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 开始路径
ctx.beginPath();
// 移动到起点
ctx.moveTo(0, 0);
// 绘制矩形的四条边
ctx.lineTo(100, 0); // 从(0, 0)到(100, 0)
ctx.lineTo(100, 100); // 从(100, 0)到(100, 100)
ctx.lineTo(0, 100); // 从(100, 100)到(0, 100)
ctx.lineTo(0, 0); // 从(0, 100)回到(0, 0)
// 闭合路径
ctx.closePath();
// 绘制描边
ctx.stroke();
颜色设置
Canvas支持多种颜色设置方式，包括颜色关键字、16进制颜色值和RGBA颜色值。以下是一个使用RGBA颜色值的示例：
// 设置描边颜色为半透明红色
ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
// 设置填充颜色为半透明蓝色
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
填充与描边的使用
填充
使用fill()方法可以填充图形的内部区域。以下是一个填充矩形的示例：
// 开始路径
ctx.beginPath();
// 绘制矩形
ctx.rect(50, 50, 100, 100);
// 设置填充颜色
ctx.fillStyle = 'blue';
// 填充矩形
ctx.fill();
描边
使用stroke()方法可以绘制图形的描边。以下是一个描边矩形的示例：
// 开始路径
ctx.beginPath();
// 绘制矩形
ctx.rect(50, 50, 100, 100);
// 设置描边颜色
ctx.strokeStyle = 'red';
// 设置描边宽度
ctx.lineWidth = 5;
// 绘制描边
ctx.stroke();
常见问题解答（FAQ）
问题 答案
为什么绘制的图形没有显示？ 确保调用了stroke()或fill()方法，否则路径不会被绘制到Canvas上。
如何设置描边宽度？ 使用ctx.lineWidth属性设置描边宽度。
如何绘制透明颜色？ 使用RGBA颜色值，例如rgba(255, 0, 0, 0.5)。
如何绘制实心图形？ 使用fill()方法填充图形内部区域。
如何绘制空心图形？ 使用stroke()方法绘制图形的描边。
示例代码
以下是一个完整的示例代码，展示如何绘制矩形和三角形：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制矩形
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.stroke();
// 绘制三角形
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 150);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
相似概念对比
概念 描边 填充
作用 绘制图形的边框 填充图形的内部区域
方法 stroke() fill()
颜色设置 strokeStyle fillStyle
示例 ctx.strokeStyle = 'red'; ctx.stroke(); ctx.fillStyle = 'blue'; ctx.fill();
本文详细介绍了Canvas绘制矩形和三角形的核心知识点，并通过代码示例和FAQ解答常见问题，帮助开发者更好地掌握Canvas图形绘制技术。