html5如何写出圆背景,利用HTML5实现Canvas虚幻圆点背景特效

特效描述：利用HTML5实现 Canvas 虚幻圆点 背景特效。利用HTML5实现Canvas虚幻圆点背景特效

代码结构

1. 引入JS

2. HTML代码

(function($){

var canvas = $('#bg').children('canvas'),

background = canvas[0],

foreground1 = canvas[1],

foreground2 = canvas[2],

config = {

circle: {

amount: 18,

layer: 3,

color: [157, 97, 207],

alpha: 0.3

},

line: {

amount: 12,

layer: 3,

color: [255, 255, 255],

alpha: 0.3

},

speed: 0.5,

angle: 20

};

if (background.getContext){

var bctx = background.getContext('2d'),

fctx1 = foreground1.getContext('2d'),

fctx2 = foreground2.getContext('2d'),

M = window.Math, // Cached Math

degree = config.angle/360*M.PI*2,

circles = [],

lines = [],

wWidth, wHeight, timer;

requestAnimationFrame = window.requestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame ||

function(callback, element) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||

window.mozCancelAnimationFrame ||

window.webkitCancelAnimationFrame ||

window.msCancelAnimationFrame ||

window.oCancelAnimationFrame ||