html5 在canvas上画直线和矩形

发布时间:2025-05-12      访问量:41
在 HTML5 中,可以使用 Canvas API 在画布上绘制直线和矩形。以下是具体实现方法和示例代码:


**1. 创建 Canvas 元素**
首先需要在 HTML 中添加一个 `<canvas>` 标签:
html <canvas id="myCanvas" width="400" height="300"></canvas>


**2. 获取绘图上下文**
在 JavaScript 中获取 Canvas 的 2D 上下文:
javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d');


**3. 绘制直线**
使用 `moveTo()` 和 `lineTo()` 方法定义路径,再通过 `stroke()` 描边。

javascript // 设置线条样式 ctx.strokeStyle = 'blue'; // 线条颜色 ctx.lineWidth = 5; // 线条宽度 // 绘制第一条直线 ctx.beginPath(); // 开始新路径 ctx.moveTo(50, 50); // 起点坐标 ctx.lineTo(350, 50); // 终点坐标 ctx.stroke(); // 描边 // 绘制第二条直线(无需 beginPath,会延续当前路径) ctx.strokeStyle = 'red'; ctx.lineWidth = 3; ctx.moveTo(50, 100); ctx.lineTo(350, 100); ctx.stroke();


**4. 绘制矩形**
**方法一:使用路径绘制(需手动描边或填充)**
javascript ctx.beginPath(); ctx.rect(50, 150, 100, 70); // x, y, width, height ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; // 半透明绿色 ctx.fill(); // 填充矩形 ctx.lineWidth = 2; ctx.strokeStyle = 'black'; ctx.stroke(); // 描边矩形

**方法二:直接填充矩形(更高效)**
javascript ctx.fillStyle = 'purple'; ctx.fillRect(200, 150, 100, 70); // 直接填充紫色矩形

**方法三:直接描边矩形**
javascript ctx.strokeStyle = 'orange'; ctx.lineWidth = 4; ctx.strokeRect(200, 250, 100, 40); // 直接描边橙色矩形


**5. 清除矩形区域**
javascript ctx.clearRect(100, 200, 50, 30); // 清除指定区域(变为透明)


**6. 完整示例代码**
html <!DOCTYPE html> <html> <head> <title>Canvas 绘制直线和矩形</title> </head> <body> <canvas id="myCanvas" width="400" height="350"></canvas> <script> // 获取 Canvas 和绘图上下文 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制直线 ctx.strokeStyle = 'blue'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(350, 50); ctx.stroke(); ctx.strokeStyle = 'red'; ctx.lineWidth = 3; ctx.moveTo(50, 100); ctx.lineTo(350, 100); ctx.stroke(); // 绘制矩形(使用路径) ctx.beginPath(); ctx.rect(50, 150, 100, 70); ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = 'black'; ctx.stroke(); // 直接填充矩形 ctx.fillStyle = 'purple'; ctx.fillRect(200, 150, 100, 70); // 直接描边矩形 ctx.strokeStyle = 'orange'; ctx.lineWidth = 4; ctx.strokeRect(200, 250, 100, 40); // 清除矩形区域 ctx.clearRect(100, 200, 50, 30); </script> </body> </html>


**7. 效果预览**
上述代码将在 Canvas 上绘制:
- 两条水平直线(蓝色和红色)
- 一个半透明绿色填充的矩形(带黑色边框)
- 一个紫色填充的矩形
- 一个橙色边框的矩形
- 一个被清除的透明区域


**8. 绘图状态管理**
使用 `save()` 和 `restore()` 可以保存和恢复绘图状态(如颜色、线宽等):
javascript ctx.save(); // 保存当前状态 ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); ctx.restore(); // 恢复之前的状态 ctx.fillRect(200, 50, 100, 100); // 使用恢复后的样式


**9. 更多绘制技巧**
- **圆角矩形**:结合弧线和直线绘制。
- **渐变填充**:使用 `createLinearGradient()` 或 `createRadialGradient()`。
- **阴影效果**:通过 `shadowColor`、`shadowBlur` 等属性设置。

Canvas API 功能强大,可以绘制复杂的图形和动画,适合数据可视化、游戏开发等场景。
堆内存
多线程
strdup
初始化器
冒泡排序
增删改查
BufferedReader
输入输出
面向对象
生命周期
闭包的概念
原型链
Flask
mysql-connector-python
单例模式
浅拷贝
隔离级别
索引
InnoDB
左连接
聚合函数
PuTTY
TRUNCATE
str_starts_with_many
DateTime
array_combine
闭包的概念