fillRect()方法画矩形，使用arc()方法画圆形。HTML5 Canvas画图教程(9)—canvas中画出矩形和圆形
在HTML5的Canvas中，绘制矩形和圆形是基础操作，通过使用JavaScript，可以方便地在Canvas上绘制各种图形，本文将详细介绍如何在Canvas中绘制矩形和圆形，并提供相关示例代码。
绘制矩形
要在Canvas中绘制矩形，可以使用fillRect()和strokeRect()方法。fillRect()用于填充矩形，而strokeRect()则只绘制矩形的边框，以下是具体步骤：
1、创建Canvas元素：在HTML页面中创建一个Canvas元素，并设置其宽度和高度。
<canvas id="myCanvas" width="300" height="200"></canvas>
2、获取Canvas上下文：使用JavaScript获取Canvas元素的上下文。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
3、绘制矩形：使用fillRect()或strokeRect()方法绘制矩形。
// 绘制一个填充的红色矩形 ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100); // 绘制一个只有边框的矩形 ctx.strokeStyle = "blue"; ctx.strokeRect(200, 20, 150, 100);
绘制圆形
要在Canvas中绘制圆形，可以使用beginPath()、arc()、fill()和stroke()方法，以下是具体步骤：
1、创建Canvas元素：与绘制矩形相同，首先需要创建一个Canvas元素。
<canvas id="myCanvas" width="300" height="200"></canvas>
2、获取Canvas上下文：与绘制矩形相同，使用JavaScript获取Canvas元素的上下文。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
3、绘制圆形：使用beginPath()、arc()、fill()和stroke()方法绘制圆形。
// 绘制一个填充的红色圆形 ctx.beginPath(); ctx.arc(75, 75, 50, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); // 绘制一个只有边框的圆形 ctx.beginPath(); ctx.arc(225, 75, 50, 0, 2 * Math.PI); ctx.strokeStyle = "blue"; ctx.stroke();
综合示例
以下是一个综合示例，展示如何在Canvas中同时绘制矩形和圆形：
<!DOCTYPE html>
<html>
<head>
<title>Canvas Draw</title>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制矩形
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 150, 100);
// 绘制圆形
ctx.beginPath();
ctx.arc(225, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "purple";
ctx.stroke();
</script>
</body>
</html>
FAQs
Q1: Canvas中的坐标系是如何定义的？
A1: 在Canvas中，坐标系的原点（0,0）位于Canvas的左上角，X轴从左到右递增，Y轴从上到下递增。fillRect(20, 20, 150, 100)表示在左上角(20, 20)处开始绘制一个宽度为150，高度为100的矩形。
Q2: 如何在Canvas中实现动画效果？
A2: 实现动画效果通常需要使用定时器（如setInterval）来不断重绘图形，可以通过改变矩形或圆形的位置来实现移动的动画效果：
function reDraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.fillStyle = "green";
ctx.fillRect(x, y, 150, 100); // 重新绘制矩形，x和y可以是动态变化的值
x += 1; // 更新位置
if (x > canvas.width) x = 0; // 重置位置以实现循环动画
}
setInterval(reDraw, 100); // 每隔100毫秒调用一次reDraw函数
| 步骤 | 描述 | 代码示例 |
||||
| 1. 初始化Canvas | 在HTML中创建一个<canvas>元素，并设置其ID以便在JavaScript中引用。 | ```html
<canvas id="myCanvas" width="200" height="200"></canvas> |
| 2. 获取Canvas上下文 | 使用getContext('2d')方法获取Canvas的2D渲染上下文。 | ```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
``` |
| 3. 绘制矩形 | 使用fillRect(x, y, width, height)方法绘制填充矩形。 | ```javascript
ctx.fillStyle = "red"; // 设置填充颜色
ctx.fillRect(10, 10, 50, 50); // 绘制一个红色的填充矩形，左上角在(10, 10)，宽50高50 |
| 4. 设置矩形边框 | 使用strokeRect(x, y, width, height)方法绘制边框矩形。 | ```javascript
ctx.strokeStyle = "blue"; // 设置边框颜色
ctx.strokeRect(70, 10, 50, 50); // 绘制一个蓝色的边框矩形，左上角在(70, 10)，宽50高50 |
| 5. 清除矩形边框样式 | 如果需要清除边框样式，可以再次调用fillStyle和strokeStyle属性设置。 | ```javascript
ctx.fillStyle = "transparent"; // 设置填充颜色为透明
ctx.fillRect(130, 10, 50, 50); // 再次绘制一个填充矩形以覆盖之前的边框矩形 |
| 6. 绘制圆形 | 使用arc(x, y, radius, startAngle, endAngle, counterclockwise)方法绘制圆形。 | ```javascript
ctx.beginPath(); // 开始绘制路径
ctx.arc(150, 70, 50, 0, 2 * Math.PI, false); // 绘制一个圆形，中心在(150, 70)，半径50，顺时针方向
ctx.fillStyle = "green"; // 设置填充颜色
ctx.fill(); // 填充圆形 |
| 7. 设置圆形边框 | 使用stroke方法绘制圆形边框。 | ```javascript
ctx.strokeStyle = "yellow"; // 设置边框颜色
ctx.lineWidth = 5; // 设置边框宽度
ctx.stroke(); // 绘制圆形边框 |
| 8. 完成绘制 | 完成上述步骤后，Canvas上应该有一个红色的填充矩形、一个蓝色的边框矩形和一个绿色的填充圆形，以及一个黄色的边框圆形。 | ```javascript
// 完成绘制，无需额外代码 |