下面就是这次的主角了
个人觉得有点太大了,去掉了右边音量指示部分,效果图如下
下面就是代码了
<!DOCTYPE html>
<html>
<head>
<title>--</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
Sound = function(dom){
this.canvas = dom.get(0);
this.s = this.canvas.getContext("2d");
this.width = parseInt($(dom).css("width").replace("px"));
this.height = parseInt($(dom).css("height").replace("px"));
this.canvas.width=this.width;//上边的两步可以省略，直接在这里赋值
this.canvas.height=this.height;
this.img = new Image();
this.img.src = "f:/sound.png";
this.imgX = 10;
this.imgY = 20;
this.imgWidth = 40;
this.imgHeight = 40;
this.timer;
this.minhd=-28;//最小值hd
this.hd=0;
this.cr=0;
this.tcr=0;
this.maxcr=40;//最大上色半径
this.grd;//渐变圆
this.resetSpeed = 1.7//复位速度
this.val=0.4;//默认音量
this.isCoverColor = true;//鼠标经过是否上色
this.isAllowClick = true;//是否允许点击
//初始化
this.init = function(){
var _this=this;
_this.img.onload = function(){
_this.s.drawImage(_this.img, _this.imgX, _this.imgY, _this.imgWidth, _this.imgHeight);
};
_this.show(_this.val);
//鼠标按下事件
_this.canvas.addEventListener("mousedown", function(evt){
if(!_this.isAllowClick) return;
clearInterval(_this.timer);
_this.isCoverColor = false;
//判断点击位置
if(!(_this.getMousePos(evt).x<50 && _this.getMousePos(evt).x>=50-_this.imgWidth+3 && _this.getMousePos(evt).y>27 && _this.getMousePos(evt).y<=27+_this.imgHeight-5)) return;
//先清除之前留下的痕迹
_this.s.clearRect(0, 0, 50, 60);
_this.s.drawImage(_this.img, _this.imgX, _this.imgY, _this.imgWidth, _this.imgHeight);
//给喇叭上色
_this.coverColor("#B6AFBF");
_this.timer = setInterval(function(){
_this.isCoverColor = false;
//喇叭旋转动画
_this.hd = parseFloat(_this.hd)-parseFloat(0.2);//旋转角度,弧度制
if(_this.hd<_this.minhd) _this.hd = _this.minhd;
else _this.hd = _this.hd.toFixed(2);
_this.s.save();
_this.s.clearRect(0, 0, 50, 60);
_this.s.translate(20+_this.imgX, 60);
_this.s.rotate(_this.hd*Math.PI/180);
_this.s.drawImage(_this.img, -20, -40, _this.imgWidth, _this.imgHeight);
_this.s.translate(0, 0);
//喇叭旋转动画结束
//给喇叭上色
_this.cr = parseFloat(_this.cr)+0.21;
if(_this.cr>_this.maxcr) _this.cr = _this.maxcr;
else _this.cr = _this.cr.toFixed(2);
_this.s.beginPath();
_this.s.arc(-20,-18,_this.cr,0,Math.PI*2,true);
_this.s.globalCompositeOperation="source-atop";
_this.grd = _this.s.createRadialGradient(-20,-18,15,-20,-18,60);
_this.grd.addColorStop("0", "#8C78A0");
_this.grd.addColorStop("1", "#7040A7");
_this.s.fillStyle=_this.grd;
_this.s.fill();
_this.s.closePath();
_this.s.restore();
}, 10);
}, false);
//鼠标移动事件
_this.canvas.addEventListener("mousemove", function(evt){
if(!_this.isAllowClick) return;
//修改鼠标指针样式,给喇叭叠加颜色
if(!(_this.getMousePos(evt).x<50 && _this.getMousePos(evt).x>=50-_this.imgWidth+3 && _this.getMousePos(evt).y>27 && _this.getMousePos(evt).y<=27+_this.imgHeight-5)){
_this.canvas.style.cursor = "default";
// if(_this.isCoverColor) _this.coverColor("#CAC5D0");//上色
}else{
_this.canvas.style.cursor = "pointer";
// if(_this.isCoverColor) _this.coverColor("#B6AFBF");//上色
}
},false);
//鼠标松开事件
_this.canvas.addEventListener("mouseup", function(evt){
var tval = _this.val;
if(!_this.isAllowClick) return;
_this.reset(evt);
if(!(_this.getMousePos(evt).x<50 && _this.getMousePos(evt).x>=50-_this.imgWidth+3 && _this.getMousePos(evt).y>27 && _this.getMousePos(evt).y<=27+_this.imgHeight-5)){
_this.val = tval;
}else{
_this.val = ((_this.cr)/(_this.maxcr)).toFixed(2);
}
}, false);
//鼠标移出事件
_this.canvas.addEventListener("mouseout", function(evt){
setTimeout(function(){
_this.reset();
// _this.coverColor("#CAC5D0");//上色
}, 100);
}, false);
};
this.coverColor = function(color){
var _this=this;
//给喇叭上色
_this.s.save();
_this.s.translate(20+_this.imgX, 60);
_this.s.beginPath();
_this.s.arc(-20,-18,_this.maxcr,0,Math.PI*2,true);
_this.s.globalCompositeOperation="source-atop";
_this.grd = _this.s.createRadialGradient(-20,-18,15,-20,-18,60);
_this.grd.addColorStop("0", color);
_this.grd.addColorStop("1", color);
_this.s.fillStyle=_this.grd;
_this.s.fill();
_this.s.closePath();
_this.s.restore();
};
this.show = function(value){
var _this=this;
if(value) _this.tcr = value*_this.maxcr;
setTimeout(function(){
_this.s.save();
_this.s.translate(20+_this.imgX, 60);
_this.s.beginPath();
_this.s.arc(-20,-18,_this.tcr,0,Math.PI*2,true);
_this.s.globalCompositeOperation="source-atop";
_this.grd = _this.s.createRadialGradient(-20,-18,15,-20,-18,60);
_this.grd.addColorStop("0", "#8C78A0");
_this.grd.addColorStop("1", "#7040A7");
_this.s.fillStyle=_this.grd;
_this.s.fill();
_this.s.closePath();
_this.s.restore();
}, 100);
};
this.reset = function(evt){
var _this=this;
_this.isAllowClick = false;
_this.isCoverColor = false;
_this.tcr = _this.cr;
clearInterval(_this.timer);
_this.timer = setInterval(function(){
//喇叭旋转动画
if(_this.hd>=0) {
clearInterval(_this.timer);
_this.hd = 0;
_this.cr = 0;
_this.isCoverColor = true;
_this.isAllowClick = true;
//修改鼠标指针样式,给喇叭叠加颜色
if(_this.canvas.style.cursor == "pointer"){
setTimeout(function(){
// _this.coverColor("#B6AFBF");//
//显示音量
_this.show();
}, 1);
}
}else{
_this.hd = parseFloat(_this.hd)+parseFloat(_this.resetSpeed);//旋转角度,弧度制
if(_this.hd>0) _this.hd = 0;
else _this.hd = _this.hd.toFixed(2);
_this.s.save();
_this.s.clearRect(0, 0, 50, 60);
_this.s.translate(20+_this.imgX, 60);
_this.s.rotate(_this.hd*Math.PI/180);
_this.s.drawImage(_this.img, -20, -40, _this.imgWidth, _this.imgHeight);
_this.s.translate(0, 0);
_this.s.restore();
//喇叭旋转动画结束
}
}, 10);
};
this.getVal = function(){
var _this=this;
return _this.val;
};
this.getMousePos = function(evt){
var _this=this;
var rect = _this.canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left * (_this.canvas.width / rect.width),
y: evt.clientY - rect.top * (_this.canvas.height / rect.height)
};
};
};
$.fn.sound = function(){
$this = $(this);
var s = new Sound($this);
s.init();
return s;
};
$(function(){
var s = $("#sound").sound();
$("#sound").bind("click", function(){
console.log(s.getVal());
});
$('body').on('contextmenu', 'canvas', function(e){ return false; });
});
</script>
</head>
<body>
<canvas id="sound" width=50px height=60px style="margin: 10px;">你的浏览器不支持canvas</canvas>
</body>
</html>
966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
