以下是基于您提供的内容整理的WebGL绘图技术总结，涵盖颜色、图片、文字、贴图等核心功能，并附上关键实现要点： --- ### **1. 基础绘图技术** #### **(1) 随机填充色块** - **实现**：使用`fillRect`绘制矩形，通过循环生成随机颜色 - **代码示例**： ```javascript for (let i = 0; i < 2000; i++) { app.fillStyle = ["#e67e22", "#1abc9c", "#27ae60", "#2980b9", "#8e44ad", "#e74c3c"].sort(() => Math.random() > 0.5 ? 1 : -1)[0]; app.fillRect(Math.random() * el.width, Math.random() * el.height, 2, 2); } ``` - **特点**：动态生成随机颜色，适合生成视觉效果。 #### **(2) 圆形填充** - **实现**：使用`arc`绘制圆形，每次绘制新圆时重置路径 - **代码示例**： ```javascript for (let i = 0; i < 200; i++) { app.beginPath(); app.fillStyle = ["#e67e22", "#1abc9c", "#27ae60", "#2980b9", "#8e44ad", "#e74c3c"].sort(() => Math.random() > 0.5 ? 1 : -1)[0]; app.arc(Math.random() * el.width, Math.random() * el.height, 10 + Math.random() * 10, 0, 2 * Math.PI); app.fill(); } ``` - **优化**：每次绘制独立路径，避免颜色相互影响。 --- ### **2. 图片绘制** #### **(1) 图片缩略图** - **实现**：动态计算图片缩放比例，保持图片与Canvas大小一致 - **代码示例**： ```javascript const scale = (img: HTMLImageElement, el: HTMLCanvasElement) => { return Math.min(el.width / img.naturalWidth, el.height / img.naturalHeight); }; img.onload = () => { el.width = img.naturalWidth * scale(img, el); el.height = img.naturalHeight * scale(img, el); app.drawImage(img, 0, 0, el.width, el.height); }; ``` - **关键**：通过`scale`函数动态调整Canvas尺寸，确保图片比例一致。 #### **(2) 图片绘制** - **实现**：使用`drawImage`绘制图片，支持缩放和裁剪 - **代码示例**： ```javascript const img = document.createElement('img'); img.src = '../images/p2.jpeg'; img.onload = () => { app.drawImage(img, 0, 50, 100, 100); }; ``` - **特点**：支持图片缩放和裁剪，适合生成动态图像。 --- ### **3. 文字处理** #### **(1) 文字绘制** - **实现**：使用`fillText`绘制文字，调整基线和字体 - **代码示例**： ```javascript app.font = '60px 思源黑体-HW'; app.textBaseline = 'top'; app.strokeText("坦克游戏", 50, 0); ``` - **优化**：通过`textBaseline`调整文字位置，适配不同字体。 #### **(2) 渐变文字** - **实现**：使用`createLinearGradient`创建渐变，结合`strokeText`绘制 - **代码示例**： ```javascript const grad = app.createLinearGradient(20, 20, 200, 200); grad.addColorStop(0, '#16a085'); grad.addColorStop(0.5, '#e67e22'); grad.addColorStop(1, '#9b59b6'); app.strokeStyle = grad; app.strokeText("坦克游戏", 50, 0); ``` - **特点**：支持渐变效果，适合设计视觉效果。 --- ### **4. 贴图与图案** #### **(1) 图案绘制** - **实现**：使用`createPattern`创建重复图案，结合`fill`绘制 - **代码示例**： ```javascript const pattren = app.createPattern(img, 'repeat')!; app.fillStyle = pattren; app.fillRect(0, 0, 300, 300); ``` - **特点**：支持图片重复填充，适合生成背景图案。 #### **(2) 动态贴图** - **实现**：通过`scale`函数动态调整图片尺寸，实现缩略图效果 - **代码示例**： ```javascript const scale = (img: HTMLImageElement, el: HTMLCanvasElement) => { return Math.min(el.width / img.naturalWidth, el.height / img.naturalHeight); }; img.onload = () => { el.width = img.naturalWidth * scale(img, el); el.height = img.naturalHeight * scale(img, el); app.drawImage(img, 0, 0, el.width, el.height); }; ``` --- ### **5. 关键技术点** 1. **Canvas API**： - `fillRect`：绘制矩形 - `arc`/`drawImage`：绘制曲线/图片 - `createPattern`/`createLinearGradient`：创建渐变/图案 - `textBaseline`：调整文字基线 2. **性能优化**： - 动态计算缩放比例（避免固定尺寸） - 每次绘制独立路径（避免颜色干扰） - 使用`requestAnimationFrame`实现动画效果 3. **扩展性**： - 可通过`scale`函数动态调整图片尺寸 - 支持多种绘图方式（颜色、图片、文字、渐变） --- ### **6. 实际应用建议** - **动态交互**：通过`scale`函数实现图片自适应，提升用户体验。 - **视觉效果**：结合渐变、随机颜色、贴图等技术，打造丰富的视觉效果。 - **性能考量**：避免过度绘制，使用WebGL的硬件加速提升性能。 --- ### **总结** 通过WebGL的Canvas API，可实现以下功能： - **动态图形**：随机颜色、圆形、渐变文字 - **图片处理**：缩略图、图片绘制、贴图 - **文字设计**：字体调整、渐变效果 - **交互优化**：动态计算尺寸，提升视觉效果和性能 以上技术点可组合应用于游戏开发、UI设计等场景，通过动态计算和优化绘制，实现高效、美观的图形效果。