HTML5 Canvas 绘制随机圆形图案：字母、三角形和五角星
以下是使用 HTML5 的画布功能绘制满足您设定的 10 个圆的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>画布绘制圆</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id='myCanvas' width='400' height='400'></canvas>
<script>
function drawCircle() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制 10 个圆
for (var i = 0; i < 10; i++) {
// 随机生成圆的参数
var radius = Math.random() * 100 + 50; // 半径范围为 50-150
var x = Math.random() * (canvas.width - radius * 2) + radius;
var y = Math.random() * (canvas.height - radius * 2) + radius;
// 随机生成圆的颜色
var color = getRandomColor();
// 绘制圆
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
// 随机生成字母的位置和方向
var letterX = x - radius * 0.8 + Math.random() * (radius * 1.6);
var letterY = y - radius * 0.8 + Math.random() * (radius * 1.6);
// 绘制字母'ZJJ'
ctx.font = getRandomFontSize(radius);
ctx.fillStyle = getRandomColor();
ctx.fillText('Z', letterX, letterY);
ctx.font = getRandomFontSize(radius);
ctx.fillStyle = getRandomColor();
ctx.fillText('J', letterX + 20, letterY + 10);
ctx.font = getRandomFontSize(radius);
ctx.fillStyle = getRandomColor();
ctx.fillText('J', letterX - 20, letterY + 20);
// 绘制小三角形和小五角星
var numTriangles = Math.floor(Math.random() * 5) + 1; // 随机绘制 1-5 个小三角形
var numStars = Math.floor(Math.random() * 5) + 1; // 随机绘制 1-5 个小五角星
for (var j = 0; j < numTriangles; j++) {
drawTriangle(ctx, x, y, radius);
}
for (var k = 0; k < numStars; k++) {
drawStar(ctx, x, y, radius);
}
}
}
function drawTriangle(ctx, x, y, radius) {
var triangleWidth = radius * 0.3;
var triangleHeight = radius * 0.3;
// 随机生成三角形的位置
var posX = x - radius * 0.5 + Math.random() * (radius);
var posY = y - radius * 0.5 + Math.random() * (radius);
ctx.beginPath();
ctx.moveTo(posX, posY);
ctx.lineTo(posX + triangleWidth, posY);
ctx.lineTo(posX, posY + triangleHeight);
ctx.closePath();
ctx.fillStyle = getRandomColor();
ctx.fill();
}
function drawStar(ctx, x, y, radius) {
var starSize = radius * 0.2;
var spikes = 5; // 五角星的顶点数
// 随机生成五角星的位置
var posX = x - radius * 0.5 + Math.random() * (radius);
var posY = y - radius * 0.5 + Math.random() * (radius);
ctx.beginPath();
for (var i = 0; i < spikes; i++) {
ctx.lineTo(posX + Math.cos(i * 2 * Math.PI / spikes) * starSize, posY + Math.sin(i * 2 * Math.PI / spikes) * starSize);
ctx.lineTo(posX + Math.cos((i + 0.5) * 2 * Math.PI / spikes) * starSize * 0.5, posY + Math.sin((i + 0.5) * 2 * Math.PI / spikes) * starSize * 0.5);
}
ctx.closePath();
ctx.fillStyle = getRandomColor();
ctx.fill();
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomFontSize(radius) {
var fontSize = Math.floor(radius * 0.8) + 'px Arial';
return fontSize;
}
drawCircle(); // 调用绘制圆的函数
</script>
</body>
</html>
这段代码将创建一个 400x400 像素大小的画布，并在画布上绘制 10 个满足您设定的圆。每个圆的位置、大小和颜色都是随机生成的。在每个圆内部，画布会根据要求绘制 'ZJJ' 字母、一些小三角形和一些小五角星，它们的位置、颜色和样式也是随机的。
请将以上代码保存为一个 HTML 文件，然后在浏览器中打开该文件，即可看到绘制的圆。请注意，绘制的结果每次刷新页面都会随机变化，且圆之间不会重叠。
原文地址: https://www.cveoy.top/t/topic/Rt3 著作权归作者所有。请勿转载和采集!