<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>canvas音频特效</title>
<style>
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
body {
background-color:#000;
background-size:100% 100%;
}
#show {
display:none;
}
#clock {
position:absolute;
top:0;
left:0;
text-align:center;
color:#fff;
font-family:"等线 Light","Microsoft Yahei Light";
font-size:200px;
text-shadow: 0 0 20px red;
z-index:10;
}
#clock .sec {
font-size:0.5em;
}
#can {
margin:0;
padding:0;
position:absolute;
left:0;
top:0;
z-index:20;
}
</style>
</head>
<body>
<div id="show">测试</div>
<div id="clock">00:00</div>
<canvas id="can">您的浏览器不支持canvas标签</canvas>
<script>
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var w, h, minW;
var show = document.querySelector("#show");
function showi(str){
show.innerHTML = str;
}
var oClock = document.querySelector("#clock");
/* 时间 */
function getTime(){
var t = new Date();
oClock.innerHTML = add0(t.getHours())+" : "+add0(t.getMinutes())+" <span class='sec'>"+add0(t.getSeconds())+"</span>";
setTimeout(getTime, 1000);
};
function add0(n){
return n<10 ? '0'+n : ''+n;
}
getTime();
var can = document.querySelector("#can");
function resize(){
can.width = w = window.innerWidth;
can.height = h = window.innerHeight;
minW = Math.min(w, h);
oClock.style.width = w+'px';
oClock.style.height = oClock.style.lineHeight = h+'px';
oClock.style.fontSize = h/16+'px';
};
resize();
window.onresize = resize;
// 设定参数
var param = {
r : 0.5, // 圆的半径
color : "rgba(255,255,255,0.8)", // 颜色
blurColor : "red", // 模糊颜色
arr1 : [], // 外圆点集合
arr2 : [], // 内圆点集合
offsetAngle : 0, //旋转角度
waveArr : new Array(120)
};
var ctx = can.getContext("2d");
ctx.strokeStyle = param.color;
ctx.lineWidth = 4;
ctx.shadowBlur = 20;
ctx.shadowColor = param.blurColor;
/* 监听配置 */
window.wallpaperPropertyListener={
applyUserProperties: function(properties){
// 背景图
if(properties.image){
if(properties.image.value){
document.body.style.backgroundImage = 'url(file:///'+ properties.image.value +')';
}else{
document.body.style.backgroundImage = "url('img/1.jpg')";
}
document.body.style.backgroundSize = '100% 100%';
};
// 半径
if(properties.radius){
param.r = properties.radius.value/100;
};
// 颜色
if(properties.color){
var c = properties.color.value.split(' ').map(function(c){return Math.ceil(c*255)});
ctx.strokeStyle = param.color = 'rgba('+ c +',0.8)';
oClock.style.color = 'rgb('+c+')';
};
// 模糊颜色
if(properties.blurColor){
var c = properties.blurColor.value.split(' ').map(function(c){return Math.ceil(c*255)});
ctx.shadowColor = param.blurColor = 'rgb('+ c +')';
oClock.style.textShadow = '0 0 20px rgb('+c+')';
};
// 是否显示时间
if(properties.showTime){
oClock.style.display = properties.showTime.value ? 'block' : 'none';
};
}
}
/* 生成点 */
function createPoint(arr){
param.arr1 = [];
param.arr2 = [];
for(var i=0; i<120; i++){
var deg = Math.PI/180*(i+param.offsetAngle)*3; //角度
var w1 = arr[i] ? arr[i] : 0;
var w2;
if(param.waveArr[i]){
w2 = param.waveArr[i] - 0.1;
}else{
w2 = 0;
};
w1 = Math.max(w1, w2);
w1 = Math.min(w1, 1.2);
param.waveArr[i] = w1;
var offset1 = param.r*minW/2+w1*100+1; // 外圆偏移
var offset2 = param.r*minW/2-w1*100-1; // 内圆偏移
var p1 = getXY(offset1, deg);
var p2 = getXY(offset2, deg);
param.arr1.push({'x':p1.x, 'y':p1.y});
param.arr2.push({'x':p2.x, 'y':p2.y});
};
param.offsetAngle += 1/5;
if(param.offsetAngle>=360) param.offsetAngle = 0;
};
function getXY(offset, deg){
return {'x':Math.cos(deg)*offset+0.5*w, 'y':Math.sin(deg)*offset+0.5*h};
};
function mix(a, b){
return a*(1-param.equalize)+b*param.equalize;
}
createPoint([]);
/* 连线 */
function connect(){
// 外圆
ctx.beginPath();
ctx.moveTo(param.arr1[119].x, param.arr1[119].y);
for(var i=0; i<120; i++){
ctx.lineTo(param.arr1[i].x, param.arr1[i].y);
};
ctx.closePath();
ctx.stroke();
// 内圆
ctx.beginPath();
ctx.moveTo(param.arr2[119].x, param.arr2[119].y);
for(var i=0; i<120; i++){
ctx.lineTo(param.arr2[i].x, param.arr2[i].y);
};
ctx.closePath();
ctx.stroke();
// 内外圆连线
ctx.beginPath();
for(var i=0; i<120; i++){
ctx.moveTo(param.arr1[i].x, param.arr1[i].y);
ctx.lineTo(param.arr2[i].x, param.arr2[i].y);
};
ctx.closePath();
ctx.stroke();
};
connect();
window.wallpaperRegisterAudioListener && window.wallpaperRegisterAudioListener(wallpaperAudioListener);
function wallpaperAudioListener(arr){
ctx.clearRect(0,0,w,h);
createPoint(arr);
connect();
}
</script>
</body>
</html>
，原因如下
，开了SAO Utils就不想开雨滴了，希望楼主能早日解决
菌
