在HTML中，我们可以使用<canvas>元素和JavaScript来绘制图形，本文将介绍如何使用HTML和JavaScript绘制两个圆。
创建一个HTML文件
1、打开一个文本编辑器，如Notepad++或Visual Studio Code。
2、输入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML画圆示例</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script src="drawCircles.js"></script>
</body>
</html>
3、将文件保存为drawCircles.html。
编写JavaScript代码
1、在drawCircles.html文件中，找到<script>标签，将其链接到名为drawCircles.js的外部JavaScript文件，如果没有这个文件，请创建一个，并将以下代码粘贴到其中：
// 获取canvas元素的引用
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 定义圆的半径和位置变量
let x1 = 50;
let y1 = 50;
let r1 = 25;
let x2 = 250;
let y2 = 50;
let r2 = 25;
// 绘制第一个圆
ctx.beginPath();
ctx.arc(x1, y1, r1, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();
// 绘制第二个圆
ctx.beginPath();
ctx.arc(x2, y2, r2, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = 'red';
ctx.stroke();
2、在浏览器中打开drawCircles.html文件，你将看到两个蓝色和红色的圆，一个位于(50, 50),半径为25;另一个位于(250, 50),半径为25。
相关问题与解答
1、如何改变圆的颜色？
答：在drawCircles.js文件中，修改fillStyle和strokeStyle变量的值即可，将它们更改为其他颜色代码，如fillStyle = 'green'; fill(); ctx.strokeStyle = 'green'; ctx.stroke();,将使圆变为绿色，更多颜色代码可以参考这里。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/196898.html
微信扫一扫 