html5canvas实现响应鼠标点击的仿声呐传播动画特效源码.zip资源-CSDN文库

共3个文件

js：2个

html：1个

版权申诉

121 浏览量 2022-11-03 23:37:14 上传评论收藏 41KB ZIP 举报

HTML5 Canvas 是一种在网页上绘制图形的API，它允许开发者用JavaScript动态创建并操作二维图形。这个"html5 canvas实现响应鼠标点击的仿声呐传播动画特效源码"是一个利用Canvas API创建的互动效果，当用户点击鼠标时，会模拟声呐波的传播动画。以下是对这个知识点的详细讲解： 1. **HTML5 Canvas 基础**： - Canvas 是HTML5的一个核心元素，通过JavaScript提供了一个可编程的画布，可以在上面绘制各种形状、图像、文字等。 - `<canvas>`标签在HTML中定义了一个矩形区域，通过JavaScript的Canvas API进行绘图操作。 2. **Canvas API**： - `getContext('2d')`：获取2D渲染上下文，这是Canvas绘图的主要接口。 - `fillRect(x, y, width, height)`：绘制填充的矩形。 - `strokeRect(x, y, width, height)`：绘制边框的矩形。 - `beginPath()`：开始一个新的路径。 - `moveTo(x, y)`：将当前路径移动到指定坐标。 - `lineTo(x, y)`：从当前点绘制一条直线到指定坐标。 - `arc(x, y, radius, startAngle, endAngle, anticlockwise)`：绘制圆弧或椭圆的一部分。 - `fill()` 和 `stroke()`：分别用于填充路径和描边路径。 3. **鼠标事件处理**： - `addEventListener('click', function)`：为Canvas绑定点击事件监听器，当用户点击时触发指定函数。 - `event.clientX` 和 `event.clientY`：获取鼠标点击时相对于视口左上角的X和Y坐标。 4. **动画原理**： - 使用`requestAnimationFrame(callback)`来创建动画。这个方法会在下一次重绘之前调用指定的回调函数，从而形成连续的视觉效果。 - 动画的每一帧，都需要清除Canvas（`clearRect(0, 0, canvas.width, canvas.height)`）以消除前一帧的影响，然后重新绘制新的状态。 5. **声呐传播模拟**： - 声呐波的传播通常表现为圆形扩散，可以使用`arc()`方法绘制圆弧，每次点击时计算出圆心和半径，根据时间逐步扩大圆的半径，模拟波的传播。 - 可以通过改变线条的颜色或透明度，表现出声波传播的强度衰减。 6. **性能优化**： - 使用局部变量存储常量，减少重复计算。 - 使用`shouldComponentUpdate`或条件判断避免不必要的重绘。 - 当动画不活跃时，使用`cancelAnimationFrame`停止动画帧的更新。 7. **实际应用**： - 这种技术可以用于创建各种互动效果，如游戏、数据可视化、用户界面元素等。 - 声呐传播动画特效可以用于教学演示，让用户直观理解声波传播的概念。 8. **学习与实践**： - 学习Canvas API，掌握基本绘图命令和事件处理。 - 分析源码，理解声呐传播动画的实现逻辑。 - 尝试修改参数，创造出不同的动画效果。通过深入理解和实践这个源码，你可以提升HTML5 Canvas的编程技巧，掌握动态图形和互动效果的创建方法。同时，这也是一个很好的学习如何利用HTML5 Canvas实现复杂动画效果的实例。

资源推荐

资源详情

资源评论

收起资源包目录

html5 canvas实现响应鼠标点击的仿声呐传播动画特效源码.zip （3个子文件）

132689866308147845

index.html 6KB

jquery.min.js 91KB

Pizzicato.min.js 34KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>声纳</title> <script src="js/jquery.min.js"></script> <style> body { margin: 0; } #mainCanvas { display: block; } .legend { pointer-events: none; position: absolute; color: white; font-family: sans-serif; } .legend p { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; top: 10px; left: 25px; position: relative; margin: 0; text-transform: uppercase; letter-spacing: 5px; } .legend p.vert { left: 5px; margin-top: 10px; writing-mode: vertical-lr; text-orientation: upright; } </style> </head> <body> <script src="js/Pizzicato.min.js"></script> <div class="legend"> <p class="">Pitch</p> <p class="vert">Volume</p> </div> <canvas id="mainCanvas" background="#FFFFFF">Canvas fail!</canvas><script> var SceneManager = function(ctx){ this.waves = []; this.hue = 208; this.sat = 64; this.lum = 15; this.opacity = 1; this.msgOpacity = 1; this.started = false; //button handlers this.mouseOff = function(){ } this.mouseHover = function(mouse){ } this.mouseClick = function(mouse){ this.started = true; this.createWave(mouse.x, mouse.y) } this.createWave = function(centerX, centerY){ var wave = new Wave(ctx, centerX, centerY); wave.init(); this.waves.push(wave); } this.destroyWave = function(index){ this.waves.splice(index, 1); } this.update = function(){ if(this.started){ this.msgOpacity -= 0.05; } for(var i = 0; i < this.waves.length; i++){ this.waves[i].update(); if(this.waves[i].ripples.length === 0){ this.destroyWave(this.waves[i]); } } } this.render = function(){ ctx.beginPath(); ctx.lineWidth = 1; ctx.textAlign="start"; ctx.fillStyle = "hsla("+this.hue+", "+this.sat+"%, "+this.lum+"%, "+this.opacity+")"; ctx.fillRect(0,0,canvasWidth, canvasHeight); ctx.strokeStyle = "hsla(255, 255%, 255%, 1)"; ctx.moveTo(5, 25); ctx.lineTo(250, 25); ctx.moveTo(20, 5); ctx.lineTo(20, 250); ctx.font = "15px Arial"; ctx.strokeText('+', 240, 20); ctx.strokeText('+', 5, 240); ctx.font = "32px Arial"; ctx.textAlign="center"; ctx.fillStyle= "hsla(255, 255%, 255%,"+ this.msgOpacity+ " )"; ctx.fillText('Click anywhere to make some noise', canvasWidth/2, canvasHeight/2); ctx.stroke(); ctx.closePath(); for(var i = 0; i < this.waves.length; i++){ this.waves[i].render(); } } } var Wave = function(ctx, cx, cy){ this.ripples = []; this.rippleSpeed = 10; this.rippleCount = 4; this.init = function(){ for(var i = 1; i < this.rippleCount+1; i++){ var decay = Math.pow(0.65, i); var ripple = new Ripple(ctx, cx, cy, this.rippleSpeed, decay); ripple.init(); this.ripples.push(ripple); } this.ripples[0].sound.play(); } this.destroyRipple = function(index){ this.ripples.splice(index, 1); } this.update = function() { for(var i = 0; i < this.ripples.length; i++){ this.ripples[i].update(); if(this.ripples[i].killMe){ this.destroyRipple(i); } } } this.render = function() { for(var i = 0; i < this.ripples.length; i++){ this.ripples[i].render(); } } } var Ripple = function(ctx, cx, cy, r, decay){ this.radius = 1; this.shadowRadius = 0; this.rSpeed = r; this.decay = decay; this.lineWidth = 10; this.epicenterX = cx; this.epicenterY = cy; this.sound; this.killMe = false; this.opacity = 1; this.init = function() { this.createSound(); } this.createSound = function(){ this.sound = new Pizzicato.Sound({ source: 'wave', options: { volume: this.epicenterY/canvasHeight, frequency: this.epicenterX } }); var delay = new Pizzicato.Effects.DubDelay({ feedback: 0.5, time: 0.7, mix: 0.5, cutoff: 500 }); this.sound.addEffect(delay); } this.update = function(){ this.rDelta = this.rSpeed*this.decay; this.radius+= this.rDelta; this.shadowRadius+= this.rDelta; if(this.radius > 100){ this.sound.stop(); } if(this.lineWidth > 1){ this.lineWidth -= 0.35*this.decay; } if(this.radius > 250 && this.opacity > 0){ this.opacity -= 0.1; } //this.build(); if(this.radius > 400){ this.killMe = true; } } this.render = function(){ ctx.beginPath(); ctx.lineWidth = this.lineWidth+2; ctx.strokeStyle = "hsla(33, 97%, 49%, "+this.opacity+")"; ctx.arc(this.epicenterX,this.epicenterY,this.shadowRadius,0,2*Math.PI); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.lineWidth = this.lineWidth; ctx.strokeStyle = "hsla(255, 255%, 255%, "+this.opacity+")"; ctx.arc(this.epicenterX,this.epicenterY,this.radius,0,2*Math.PI); ctx.stroke(); ctx.closePath(); } } // LIFECYCLE var frames = 0; function update() { frames++; sm.update(); // render render(); } function render() { // clear context.clearRect(0, 0, canvasWidth, canvasHeight); sm.render(); requestAnimationFrame(update); } // DEFINITIONS var canvas = document.getElementById('mainCanvas'); var context = canvas.getContext('2d'); var canvasWidth = canvas.width = window.innerWidth; var canvasHeight = canvas.height = window.innerHeight; var currentFrame = 0; var mouseX = -1; var mouseY = -1; var isMousePressed = false; var sm = new SceneManager(context); window.onresize = function(){ canvasWidth = canvas.width = window.innerWidth; canvasHeight = canvas.height = window.innerHeight; } function onMouseMove(evt) { mouseX = evt.clientX; mouseY = evt.clientY; } function onMouseDown(evt) { isMousePressed = true; } function onMouseUp(evt) { isMousePressed = false; sm.mouseClick(evt); } canvas.addEventListener("mousemove", onMouseMove); canvas.addEventListener("mousedown", onMouseDown); canvas.addEventListener("mouseup", onMouseUp); requestAnimationFrame(update); </script> </body> </html>

评论收藏

内容反馈

版权申诉