canvas实现动态彩色气泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
width:100%;
margin:0;
overflow:hidden;
background:hsla(232, 95%, 10%, 1);
}
</style>
</head>
<body>
<canvas id = 'canv'></canvas>
<script>
var c = document.getElementById('canv');
var $ = c.getContext("2d");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var arr = [];
var x = 0, y = 0;
for(var i = 0; i < 250; i++) arr.push(new part());
function part(){
this.x = Math.random()*w;
this.y = Math.random()*h;
this.vx = Math.random();
this.vy = Math.random();
this.col = 'hsla('+Math.random()*360+', 85%, 60%, 1)';
this.rad = Math.random()*40;
}
function draw(){
$.globalCompositeOperation = 'source-over';
$.fillStyle = 'hsla(232, 95%, 10%, 1)';
$.fillRect(0, 0, w, h);
$.globalCompositeOperation = 'lighter';
for(var j = 0; j < arr.length; j++){
var p = arr[j];
$.beginPath();
var g = $.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.rad);
g.addColorStop(0, 'hsla(0,0%,0%,.4)');
g.addColorStop(0.4, p.col);
g.addColorStop(1, 'hsla(0,0%,0%,0)');
$.fillStyle = g;
$.arc(p.x, p.y, p.rad, Math.PI*2, false);
$.fill();
p.x += p.vx;
p.y += p.vy;
if(p.x < -50) p.x = w+50;
if(p.y < -50) p.y = h+50;
if(p.x > w+50) p.x = -50;
if(p.y > h+50) p.y = -50;
}
window.requestAnimationFrame(draw);
}
draw();
window.addEventListener('resize', function(){
c.width = w = window.innerWidth;
c.height = h = window.innerHeight;
}, false);
</script>
</body>
</html>
.
相关推荐
在这个“HTML5 Canvas全屏彩色气泡动画特效”中，我们看到的是利用Canvas API创建的一个互动性极强的动画场景，用户可以通过鼠标滚轮调整气泡大小，甚至通过鼠标拖动改变气泡的展示角度。 首先，让我们了解一下...
HTML5 Canvas 是一个强大的网页...通过这个项目，我们可以学习到如何利用Canvas API创建动态图形，如何实现动画效果，以及如何通过JavaScript进行交互设计。这不仅是一个有趣的练习，也是提升网页开发技能的好途径。
在这个"HTML5 Canvas全屏彩色气泡动画特效"中，我们主要会探讨以下几个关键知识点： 1. **HTML5 Canvas API**: HTML5 Canvas提供了一组JavaScript API，用于在2D画布上绘制图形。开发者可以通过`<canvas>`元素，...
这个名为"HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码"的压缩包，显然包含了一个利用这两种技术制作的动画效果，具体表现为彩色水泡分裂的场景。 Canvas 是HTML5的一个组成部分，它提供了一个二维绘图表面，...
总的来说，"HTML5鼠标控制彩色气泡特效"是一个利用HTML5 Canvas和JavaScript实现的互动网页特效，展示了HTML5的动态图形绘制能力和JavaScript的事件处理机制。这个特效不仅增加了网页的视觉吸引力，还提供了有趣的...
在本实例"HTML5彩色气泡鼠标跟随特效"中，我们探讨的是如何利用HTML5的Canvas元素和JavaScript来实现一种独特的视觉效果——鼠标跟随的彩色气泡动画。 首先，Canvas是HTML5中的一个核心组件，它是一个二维绘图画布...
本文实例为大家分享了js实现跟随彩色气泡的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style> ...
在这个"HTML优秀实例-彩色气泡鼠标跟随"中，我们看到的是一个利用HTML5的Canvas元素实现的创新特效。Canvas是HTML5的一个核心特性，允许开发者在网页上进行动态图形绘制。 Canvas是一个基于矢量图形的画布，开发者...
在本文中，我们将深入探讨如何使用JavaScript和HTML5 Canvas实现一款彩色气泡浮动动画特效。这个特效为网页增添了一种动态、生动的视觉效果，使用户界面更具吸引力。以下是一些关键知识点： 1. **HTML5 Canvas**： ...
【JS彩色气泡移动碰撞特效】是一种通过JavaScript和Vue.js技术实现的动态视觉效果，它在网页上创建出一种生动有趣的交互体验。这种特效利用了HTML5的技术特性，结合CSS3动画，使得彩色气泡在全屏范围内自由移动，...
这样，页面上就会呈现出众多彩色气泡漂浮的场景。 此外，为了增加视觉吸引力，还可以添加更多的细节，例如调整气泡的透明度以模拟深度感，或者让气泡大小随时间逐渐变化。也可以通过监听鼠标事件，使气泡在鼠标附近...
HTML5 Canvas是现代网页开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，提供了丰富的绘图API，使得创建交互式图形和动画成为可能。在这个“HTML5 Canvas圆形爱心点赞按钮冒泡动画特效”中，我们主要...
本特效代码的核心是利用HTML5的Canvas元素来实现鼠标控制的彩色气泡特效。Canvas是一个二维绘图环境，开发者可以直接在JavaScript中进行图形绘制，从而创建出动态、交互式的视觉效果。 在这款特效中，用户可以通过...
5. **颜色变化**：为了实现彩色气泡的效果，可以随机生成或根据某种规则选择气泡的颜色。可以使用`Math.random()`生成随机RGB值，或者使用HSL色彩空间来创建更丰富的颜色变化。 6. **用户交互**：还可以添加用户...
HTML5 Canvas是一个强大的Web绘图工具，允许开发者在网页上直接进行图形绘制，实现丰富的动态视觉效果。在这个“HTML5 Canvas点击泡沫横飞特效”中，我们看到的是一个利用JavaScript和Canvas API创建的互动动画，当...
【JS彩色气泡浮动动画特效】是一种通过JavaScript和HTML5 Canvas技术实现的创新网页动态效果。这个特效将彩色的气泡以随机的方式在屏幕上浮动，为网页增添生动趣味的视觉体验，尤其适用于儿童网站、创意设计展示或者...
描述中提到的"仿Windows屏保气泡背景动画特效"是指在网页背景上模拟Windows系统经典的屏保样式，即不断升腾的彩色气泡。这种特效通常会随着页面加载或用户无操作时间过长自动触发，以增加用户体验的互动性和趣味性。...
在这个特效中，Canvas被用来绘制并操控那些跟随鼠标移动的彩色气泡。 这个特效的核心在于JavaScript代码，尤其是与Canvas相关的部分。首先，我们需要在HTML文档中创建一个`<canvas>`元素，并为其分配一个ID以便在...