HTML5 Canvas 绘制随机圆形图案
<h2>使用 HTML5 Canvas 创建充满惊喜的随机圆形图案</h2>
<p>想要学习如何使用 HTML5 Canvas API 绘制充满趣味的随机图形吗？这篇文章将带你逐步创建一个网页，其中包含五个独特的圆形图案，每个图案都包含随机生成的字母、正三角形和五角星。</p>
<h3>代码示例</h3>
<p>以下是完整的 HTML 代码，其中包含 JavaScript 代码，用于在五个独立的 Canvas 元素上绘制图案：html<!DOCTYPE html><html><head> <title>Canvas 随机圆形图案</title> <style> canvas { border: 1px solid black; } </style></head><body> <canvas id='canvas1' width='400' height='400'></canvas> <canvas id='canvas2' width='400' height='400'></canvas> <canvas id='canvas3' width='400' height='400'></canvas> <canvas id='canvas4' width='400' height='400'></canvas> <canvas id='canvas5' width='400' height='400'></canvas></p>
<pre><code><script> function drawCircle(canvasId) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); const radius = canvas.width / 2;
// 设置随机颜色 const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); ctx.fillStyle = randomColor;
// 绘制圆形 ctx.beginPath(); ctx.arc(radius, radius, radius, 0, 2 * Math.PI); ctx.fill();
// 在圆内随机生成三个字母 'ZJJ' for (let i = 0; i < 3; i++) { // 设置随机字母位置和方向 const x = Math.random() * (canvas.width - radius * 2) + radius; const y = Math.random() * (canvas.height - radius * 2) + radius; const rotation = Math.random() * 360;
// 设置随机字母颜色和字体样式 const randomTextColor = '#' + Math.floor(Math.random() * 16777215).toString(16); const randomFontSize = Math.floor(Math.random() * (radius - 10)) + 10 + 'px'; ctx.fillStyle = randomTextColor; ctx.font = randomFontSize + ' Arial';
// 绘制字母 ctx.save(); ctx.translate(x, y); ctx.rotate(rotation * Math.PI / 180); ctx.fillText('ZJJ', 0, 0); ctx.restore(); }
// 绘制随机数量的正三角形和五角星 const numShapes = Math.floor(Math.random() * 10) + 1; for (let i = 0; i < numShapes; i++) { // 设置随机形状位置、方向和大小 const shapeX = Math.random() * (canvas.width - radius * 2) + radius; const shapeY = Math.random() * (canvas.height - radius * 2) + radius; const shapeRotation = Math.random() * 360; const shapeSize = Math.floor(Math.random() * (radius * 0.3));
// 绘制正三角形 ctx.save(); ctx.translate(shapeX, shapeY); ctx.rotate(shapeRotation * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -shapeSize); ctx.lineTo(-shapeSize, shapeSize); ctx.lineTo(shapeSize, shapeSize); ctx.closePath(); ctx.stroke(); ctx.restore();
// 绘制五角星 ctx.save(); ctx.translate(shapeX, shapeY); ctx.rotate(shapeRotation * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -shapeSize); for (let j = 0; j < 5; j++) { ctx.rotate(Math.PI / 5); ctx.lineTo(0, -shapeSize * 0.5); ctx.rotate(Math.PI / 5); ctx.lineTo(0, -shapeSize); } ctx.closePath(); ctx.stroke(); ctx.restore(); } }
// 绘制五个圆 drawCircle('canvas1'); drawCircle('canvas2'); drawCircle('canvas3'); drawCircle('canvas4'); drawCircle('canvas5'); </script></body></html>
</code></pre>
<h3>代码解释</h3>
<ol>
<li><strong>HTML 结构</strong>: 我们首先创建五个 <code><canvas></code> 元素，并设置它们的 ID 和大小。2. <strong>CSS 样式</strong>: 为每个 <code><canvas></code> 元素添加边框，以便区分。3. <strong>JavaScript 代码</strong>: - <code>drawCircle(canvasId)</code> 函数: - 获取指定 ID 的 <code><canvas></code> 元素及其 2D 上下文。 - 设置随机填充颜色。 - 绘制一个圆形。 - 使用循环绘制三个 'ZJJ' 字符，每个字符都有随机位置、方向、颜色和字体大小。 - 使用循环绘制随机数量的正三角形和五角星，每个形状都有随机位置、方向、大小和颜色。 - 调用 <code>drawCircle()</code> 函数五次，分别在五个 <code><canvas></code> 元素上绘制图案。</li>
</ol>
<h3>总结</h3>
<p>通过这个例子，你学习了如何使用 HTML5 Canvas API 绘制基本图形，以及如何使用 JavaScript 生成随机位置、颜色、大小和方向。尝试修改代码，创建属于你自己的独特随机图案吧！</p>
原文地址: https://www.cveoy.top/t/topic/Twk 著作权归作者所有。请勿转载和采集!