HTML5 Canvas 绘制随机圆形：包含字母、三角形和五角星
以下是使用 HTML5 的 canvas 功能绘制所描述的圆形的代码。请注意，由于文本和形状的位置、方向、颜色和字体样式要求是随机的，因此每次运行代码将得到不同的结果。
<!DOCTYPE html>
<html>
<body>
<!-- 画布1 -->
<canvas id='canvas1' width='200' height='200'></canvas>
<!-- 画布2 -->
<canvas id='canvas2' width='200' height='200'></canvas>
<!-- 画布3 -->
<canvas id='canvas3' width='200' height='200'></canvas>
<!-- 画布4 -->
<canvas id='canvas4' width='200' height='200'></canvas>
<!-- 画布5 -->
<canvas id='canvas5' width='200' height='200'></canvas>
<script>
function drawCircle(canvasId) {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
const radius = canvas.width / 2;
// 画圆形
ctx.beginPath();
ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
ctx.fillStyle = randomColor();
ctx.fill();
ctx.closePath();
// 写字母
ctx.fillStyle = randomColor();
ctx.font = randomFont();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
drawLetters(ctx, radius);
// 画正三角形和五角星
const shapesCount = Math.floor(Math.random() * 5) + 1;
for (let i = 0; i < shapesCount; i++) {
drawShape(ctx, radius);
}
}
function drawLetters(ctx, radius) {
// 随机生成字母位置
const positions = [
[radius * 0.2, radius * 0.8],
[radius * 0.5, radius * 0.5],
[radius * 0.8, radius * 0.2],
];
positions.forEach((position) => {
const x = position[0] + randomOffset();
const y = position[1] + randomOffset();
// 随机生成字母方向
const angle = Math.random() * 2 * Math.PI;
const letter = randomLetter();
const fontSize = radius * 0.8;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillStyle = randomColor();
ctx.font = `${fontSize}px ${randomFont()}`;
ctx.fillText(letter, 0, 0);
ctx.restore();
});
}
function drawShape(ctx, radius) {
const x = radius + randomOffset();
const y = radius + randomOffset();
const size = radius * 0.3;
const angle = Math.random() * 2 * Math.PI;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
if (Math.random() < 0.5) {
// 画正三角形
ctx.beginPath();
ctx.moveTo(-size / 2, -size / 2);
ctx.lineTo(size / 2, -size / 2);
ctx.lineTo(0, size / 2);
ctx.closePath();
ctx.fillStyle = randomColor();
ctx.fill();
} else {
// 画五角星
ctx.beginPath();
ctx.moveTo(0, -size / 2);
for (let i = 0; i < 5; i++) {
ctx.rotate((Math.PI / 180) * 72);
ctx.lineTo(0, -size / 2);
ctx.rotate((Math.PI / 180) * 72);
ctx.lineTo(0, size / 2);
}
ctx.closePath();
ctx.fillStyle = randomColor();
ctx.fill();
}
ctx.restore();
}
function randomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function randomFont() {
const fonts = ['Arial', 'Verdana', 'Helvetica', 'Times New Roman', 'Courier New'];
return `${randomSize()}px ${fonts[Math.floor(Math.random() * fonts.length)]}`;
}
function randomSize() {
return Math.floor(Math.random() * 20) + 20;
}
function randomOffset() {
return (Math.random() - 0.5) * 20;
}
function randomLetter() {
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
return letters[Math.floor(Math.random() * letters.length)];
}
drawCircle('canvas1');
drawCircle('canvas2');
drawCircle('canvas3');
drawCircle('canvas4');
drawCircle('canvas5');
</script>
</body>
</html>
以上代码将在5个 canvas 画布上绘制5个满足设定要求的圆形。请将此代码保存为 .html 文件并在浏览器中打开，即可看到绘制的结果。每次刷新页面都将得到不同的随机结果。
原文地址: https://www.cveoy.top/t/topic/Tkd 著作权归作者所有。请勿转载和采集!