HTML5+Canvas制作圆点不断衍生动画特效源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

40 浏览量 2022-11-03 23:40:57 上传评论收藏 3KB ZIP 举报

HTML5是一种先进的网页标记语言，它为Web开发者提供了更强大的工具和功能，使得网页的交互性和动态性大大增强。在本资源"HTML5+Canvas制作圆点不断衍生动画特效源码.zip"中，我们将深入探讨如何利用HTML5的Canvas元素来创建一个动态的、不断衍生的圆点动画特效。 Canvas是HTML5中的一个核心特性，它提供了一个可编程的图形画布，允许开发者通过JavaScript来绘制2D图形和图像。这个标签就像一块空白的画布，我们可以通过JavaScript的API来描绘线条、形状、图像等，实现丰富的视觉效果。在这个特定的源码中，主要涉及以下HTML5 Canvas的API和技巧： 1. **创建Canvas元素**：在HTML中，我们用`<canvas>`标签创建一个画布，通过`id`属性来标识，以便在JavaScript中引用。 ```html <canvas id="myCanvas" width="800" height="600"></canvas> ``` 2. **获取Canvas上下文**：在JavaScript中，我们需要获取`canvas`元素的2D渲染上下文，这是所有绘图操作的基础。 ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ``` 3. **绘制圆点**：使用`arc()`方法可以绘制圆形，指定圆心坐标、半径和开始/结束角度。 ```javascript ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI*2, false); // 圆心坐标(x, y)，半径，从0到2π的弧度 ctx.fillStyle = 'color'; // 设置填充颜色 ctx.fill(); // 填充圆形 ``` 4. **动画原理**：通过改变圆点的位置或属性（如大小、颜色），并使用`requestAnimationFrame()`来实现连续的重绘，可以创建动画效果。在每次重绘之间，圆点的位置会有所变化，从而形成动态衍生的视觉效果。 ```javascript function animate() { requestAnimationFrame(animate); // 更新圆点位置或其他属性 // 重新绘制 } animate(); ``` 5. **事件监听**：为了响应用户的交互，可以添加事件监听器，例如鼠标点击事件，这样当用户点击画布时，可以生成新的圆点或者改变动画行为。 ```javascript canvas.addEventListener('click', function(event) { var x = event.clientX - canvas.offsetLeft; var y = event.clientY - canvas.offsetTop; // 在点击位置创建新的圆点 }); ``` 6. **优化性能**：对于大量圆点的动画，优化性能至关重要。可以考虑使用数组存储圆点信息，并批量更新和绘制，避免频繁地调用`beginPath()`和`fill()`。 7. **CSS样式**：虽然Canvas本身不支持CSS，但我们可以调整`canvas`元素的CSS样式，比如边框、背景色等，以适应整体页面设计。通过以上技术，HTML5+Canvas可以实现各种复杂的动画效果，包括这个圆点衍生动画。在实际项目中，开发者可以根据需求调整代码，增加更多的交互性和个性化设计，以创造出更具吸引力的用户体验。学习和掌握这些技术，将极大地提升Web开发者的创造力和技能水平。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+Canvas制作圆点不断衍生动画特效源码.zip （1个子文件）

132696213065734736

likecs.com_132696213067676597

index.html 5KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5圆点不断衍生动画特效</title> <style> * { padding: 0; margin: 0; overflow: hidden; } body { background-color: #191321; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Helvetica Neue", sans-serif; color: #fff; } h3 { font-weight: 300; } button { border: 0; background: none; color: #fff; } .control-group { display: none; } .control-palette { background-color: #0d0a11; font-weight: 300; position: absolute; bottom: 0.25em; left: 0.25em; padding: 0.25em 0.5em; border-radius: 7px; border: 1px solid #0e0d0e; border-bottom-width: 2px; } .control-palette--is-open .control-group { display: block; } </style> </head> <body> <canvas id="pattern" width="600" height="600"></canvas>  <div class="control-palette js-palette"> <div class="control-group js-controls"> <div class="control-group__item slider"> <h3> 发散度 </h3> <input id="divergence-angle" type="range" name="divergence" min="97" max="147" value="137.5" step="0.5" class="slider__control"> <span id="divergence-angle-value" class="slider__value">137.5</span> </div> <div class="control-group__item slider"> <h3> 密集度 </h3> <input id="scale" type="range" name="scale" min="5" max="15" value="10" step="0.5" class="slider__control"> <span id="constant-value" class="slider__value">10</span> </div> </div> <button class="button js-toggle-controls"> 三 </button> </div> <script> // Interactive Planar Phyllotaxis Demo // Inspired by The Coding Train's Coding Challenge #30 // Formulas from http://algorithmicbotany.org/papers/abop/abop-ch4.pdf // Setup related variables const pattern = document.querySelector('#pattern'); const ctx = pattern.getContext('2d'); const fps = 60; // Set the draw loop's framerate let hue = 0; // Current Color // Formula related variables let c = 10; // Scaling constant. Bigger number, bigger gaps. let n = 0; // Iteration count let divergenceAngle = 137.5 // The angle each iteration diverges from the previous. // NOTE: 137.5 is the angle for a sunflower // Setup //////////////////////////////////////////////////// // Fill the page pattern.width = window.innerWidth; pattern.height = window.innerHeight; // Define Draw Loop //////////////////////////////////////////////////// function draw() { // These should probably be extracted out to a // separate function. Not going to bother this demo. const radius = c * Math.sqrt(n); // Current radius of the spiral const angle = n * divergenceAngle; // Offset angle // cos() and sin() expect radians, but our formula is in degrees // We'll need to convert the degrees to radians const radAngle = angle * (Math.PI / 180); // Formulas for x and y from http://algorithmicbotany.org/papers/abop/abop-ch4.pdf // Add half the canvas height and width to center the formation const x = radius * Math.cos(radAngle) + pattern.width / 2; const y = radius * Math.sin(radAngle) + pattern.height / 2; // Increment the color one step hue++; // Reset the color once it gets to the end if (hue >= 360) { hue = 0; } // Draw this iteration's circle ctx.beginPath(); ctx.arc(x, y, 6, 0, Math.PI * 2); ctx.fillStyle = `hsl(${hue}, 100%, 50%)`; ctx.fill(); // Increment iteration count n++; } // Start Draw Loop //////////////////////////////////////////////////// setInterval( function() { draw(); }, 1000/fps); // Controls (Ignore this, it's just for the sliders) //////////////////////////////////////////////////// const inputs = document.querySelectorAll('.js-controls input'); const divergenceDisplay = document.querySelector('#divergence-angle-value'); const constantDisplay = document.querySelector('#constant-value'); const toggleButton = document.querySelector('.js-toggle-controls'); const palette = document.querySelector('.js-palette'); function handleUpdate() { if (this.name === 'divergence') { divergenceAngle = this.value; divergenceDisplay.innerHTML = `${this.value}`; } else if (this.name === 'scale') { c = this.value; constantDisplay.innerHTML = `${this.value}`; } // Reset the demo so we have a fresh start with the new values ctx.clearRect(0, 0, pattern.width, pattern.height); n = 0; } function togglePalette() { palette.classList.toggle( 'control-palette--is-open' ); } inputs.forEach(input => input.addEventListener('change', handleUpdate)); toggleButton.addEventListener('click', togglePalette); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉