Canvas如何绘制几何图形？

图形开发canvashtml5

作为资深者，我会为你提供两个使用Canvas绘制几何图形的示例。第一个示例是绘制一个矩形，第二个示例是绘制一个圆形。以下是示例代码：

示例1：绘制矩形

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置填充颜色为红色
ctx.fillStyle = 'red';

// 绘制一个矩形，位置为(50,50)，宽度为100，高度为100
ctx.fillRect(50, 50, 100, 100);
</script>

</body>
</html>

在上述代码中，我们首先创建了一个canvas元素，并为其指定了ID“myCanvas”。然后，我们使用document.getElementById方法获取canvas元素，并通过getContext('2d')方法获取2D渲染上下文。接下来，我们设置填充颜色为红色，并使用fillRect方法绘制一个矩形。矩形的位置为(50,50)，宽度为100，高度为100。

尝试一下 »

示例2：绘制圆形

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置填充颜色为蓝色
ctx.fillStyle = 'blue';

// 绘制一个圆形，位置为(250,250)，半径为50
ctx.beginPath(); // 开始绘制路径
ctx.arc(250, 250, 50, 0, 2 * Math.PI); // 绘制圆形路径
ctx.fill(); // 填充颜色
</script>

</body>
</html>

尝试一下 »

在上述代码中，我们首先创建了一个canvas元素，并为其指定了ID“myCanvas”。然后，我们使用document.getElementById方法获取canvas元素，并通过getContext('2d')方法获取2D渲染上下文。接下来，我们设置填充颜色为蓝色，并使用beginPath方法开始绘制路径。然后，我们使用arc方法绘制一个圆形路径，其中位置为(250,250)，半径为50。最后，我们使用fill方法填充颜色，完成圆形的绘制。

上一篇：Canvas如何让文字动起来？

下一篇：如何解决在背景图上画图的问题(使用Canvas实现)？