html5游戏暂停按钮,HTML5 圆形进度控制(播放、暂停)按钮
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
function Playback(container, progressCheck) {
this.diameter = 100;
this.diameterOnHover = 120;
this.thickness = 5;
this.thicknessOnHover = 3;
this.iconSize = 24;
this.diameterStart = this.diameter;
this.thicknessStart = this.thickness;
// quick intro
this.thickness = 1;
this.diameter = 40;
this.isOver = false;
this.playing = false;
this.progress = 0;
this.progressOffset = 1;
this.container = container;
this.progressCheck = progressCheck;
this.canvas = document.createElement('canvas');
this.canvas.className = 'playback';
this.canvas.width = this.diameterOnHover;
this.canvas.height = this.diameterOnHover;
this.context = this.canvas.getContext('2d');
this.container.appendChild(this.canvas);
this.animate();
this.on('mouseover', function() {
this.isOver = true;
}.bind(this));
this.on('mouseout', function() {
this.isOver = false;
}.bind(this));
}
Playback.prototype.setPlaying = function(value) {
var wasPlaying = this.playing;
this.playing = value;
};
Playback.prototype.isPlaying = function() {
return this.playing;
};
Playback.prototype.animate = function() {
var progressBefore = this.progress;
if (this.playing) {
this.progress = this.progressCheck();
} else {
this.progress += (1 - this.progress) * 0.1;
this.progress = this.progress > 0.99999 ? 0.99999 : this.progress;
}
if (progressBefore > 0.8 && this.progress < 0.2) {
this.progressOffset = this.progress;
}
this.diameter += ((this.isOver ? this.diameterOnHover : this.diameterStart) - this.diameter) * 0.1;
this.thickness += ((this.isOver ? this.thicknessOnHover : this.thicknessStart) - this.thickness) * 0.1;
this.render();
requestAnimationFrame(this.animate.bind(this));
};
Playback.prototype.render = function() {
var progress = this.progress,
radius = (this.diameter / 2) - this.thickness,
x = this.diameter / 2,
y = this.diameter / 2,
iconSize = this.iconSize;
this.progressOffset += (1 - this.progressOffset) * 0.1;
var endAngle = (-Math.PI / 2) + (progress * (Math.PI * 2));
var startAngle = (-Math.PI / 2) + (this.progressOffset * (Math.PI * 2));
this.context.save();
this.context.clearRect(0, 0, this.diameterOnHover, this.diameterOnHover);
this.context.translate((this.diameterOnHover - this.diameter) / 2, (this.diameterOnHover - this.diameter) / 2);
// Solid background color
this.context.beginPath();
this.context.arc(x, y, radius + 2, 0, Math.PI * 2, false);
this.context.fillStyle = 'rgba( 0, 0, 0, 0.3 )';
this.context.fill();
// Draw progress track
this.context.beginPath();
this.context.arc(x, y, radius, 0, Math.PI * 2, false);
this.context.lineWidth = this.thickness;
this.context.strokeStyle = 'rgba(255,255,255,0.3)';
this.context.stroke();
// Draw progress on top of track
this.context.beginPath();
this.context.arc(x, y, radius, startAngle, endAngle, false);
this.context.lineWidth = this.thickness;
this.context.strokeStyle = '#fff';
this.context.stroke();
this.context.translate(x - (iconSize / 2), y - (iconSize / 2));
// Draw play/pause icons
if (this.playing) {
this.context.fillStyle = '#fff';
this.context.fillRect(0, 0, iconSize / 2 - 4, iconSize);
this.context.fillRect(iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize);
} else {
this.context.beginPath();
this.context.translate(2, 0);
this.context.moveTo(0, 0);
this.context.lineTo(iconSize - 2, iconSize / 2);
this.context.lineTo(0, iconSize);
this.context.fillStyle = '#fff';
this.context.fill();
}
this.context.restore();
};
Playback.prototype.on = function(type, listener) {
this.canvas.addEventListener(type, listener, false);
};
Playback.prototype.off = function(type, listener) {
this.canvas.removeEventListener(type, listener, false);
};
var demoElement = document.querySelector('.playback-demo');
var t = Date.now();
var p = new Playback(demoElement, function() {
return (Date.now() - t) * 0.04 % 100 / 100;
});
p.setPlaying(true);
p.on('click', function() {
t = Date.now();
p.render();
p.setPlaying(!p.isPlaying());
});
html5游戏暂停按钮,HTML5 圆形进度控制(播放、暂停)按钮相关推荐
- html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...
- html的canvas显示数字,HTML5效果:Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 2.创建canvas环境 var canvas = document.getElementById('canvas'), //获取canvas元素 context ...
- html5 游戏 算法,JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】...
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解[圆形情况] 发布时间:2020-10-10 13:42:43 来源:脚本之家 阅读:95 作者:krapnik 本文实例讲述了JS/HTML ...
- html数字显示百分比,扣丁学堂html5 教程之Canvas实现圆形进度条并显示数字百分比效果...
今天扣丁学堂html5培训小编和大家分享一下Canvas实现圆形进度条并显示数字百分比效果示例,对html5感兴趣的小伙伴或者是参加学习的小伙伴可以了解一下. Canvas实现圆形进度条并显示数字百分 ...
- html5+游戏+广告,给html5 游戏添加admob广告挣钱盈利
给html5游戏添加admob广告挣钱盈利 经过几年的发展,html5逐渐发展起来,特别是今年以来已经有不少html5游戏作品面世,作为开发者,如何通过html5游戏挣钱还是个问题. 这里就先介绍下通 ...
- android 暂停音乐播放器,Android仿音乐播放器带进度的播放暂停按钮
因为项目需要,要做一个下载暂停开始的按钮,要求按钮上显示进度.网上找了找没有合适的,不太满意,于是自己动手写了一个. 效果如下: 主要步骤: 1.最外侧的圆环. 2.圆环内侧代表进度的圆弧. 3.暂停 ...
- js开发html5游戏,JS开发HTML5游戏《神奇的六边形》(五)
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击这里可进入游戏体验) 因内容 ...
- html5游戏封装安卓,html5游戏移植到android并打包成apk,加广告《二》
html5游戏移植到android并打包成apk,加广告<二> 这篇则讲解开发集成,先看看工程目录结构 ? qqbrowser_sdk_v1.2.jar为X5内核sdk,下载注册开发者 B ...
- 耳机声控,以及耳机拔出或者插入控制播放暂停
目录介绍 1.耳机拔出时暂停播放 1.1 拔出耳机自动暂停 , 插入耳机自动恢复播放 1.2 实现的原理分析 1.3 代码实现逻辑 2.耳机线控,耳机控制声音 2.1 耳机按键也可以控制音量调节 2. ...
最新文章
- IT领域中混合云管理工具扮演什么角色?
- 员工管理系统---SpringBoot
- java 项目 人力资源项目,基于jsp的人力资源系统-JavaEE实现人力资源系统 - java项目源码...
- uva-10887-枚举
- 《TextRank: Bringing Order into Texts》
- 工业控制系统基础知识
- Python网络爬虫经典书籍推荐
- tomato(番茄)固件的简单设置截图
- 中兴捧月——婚姻匹配问题
- 优麒麟使用教程第四期:Linux平台U盘启动盘制作(建议收藏)
- android路由器安装wifidog,Wifidog-刷OpenWRT标准版固件后安装LuCI的方法
- Pytorch中pack_padded_sequence和pad_packed_sequence的理解
- 有道单词导入 大量有道单词 生词本 批量导入 添加 有道单词XML 背单词
- Windows Mobile 6 SDK 中的 GPS 工具
- No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案
- Excel 2003文档的密码忘了怎么办
- Java接口之间的多继承
- ROS2 第一个C++程序(talker和listener为例)
- 谈一谈mmkv的使用
- 8种 骨干级 架构设计模式 图示 分析 优缺点 总结