html5动态气泡效果6,[jQuery]Canvas气泡动态背景效果

效果演示

用到了html5标签，用js绘制气泡以及控制它们的动作。下面介绍实现方法：

html结构

比如要加在头部

插进去：

js控制

有几个地方我做了中文注释，其中三个是控制canvas标签的高宽的。这个根据你的div容器大小来调整，其他不要动。

$(function() {

var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

// Main

initHeader();

addListeners();

function initHeader() {

width = document.body.clientWidth - 134; // 调整为自己div的宽度

height = 300; // 调整为自己div的高度

target = {x: 0, y: height};

largeHeader = document.getElementById('header'); //改为你的div容器id

largeHeader.style.height = height+'px';

canvas = document.getElementById('paopao'); // 这个是canvas标签的id

canvas.width = width;

canvas.height = height;

ctx = canvas.getContext('2d');

// create