金属质感不锈钢按钮Button

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>居中放大按钮示例</title><style>button {width: 300px;height: 100px;font-size: 40px;border-radius: 100px;border-top: 1px solid rgba(255, 255, 255, 0.9);border-left: 1px solid rgba(255, 253, 253, 0.776);border-right: 2px solid  rgba(255, 253, 253, 0.7);border-bottom: 2px solid rgba(255, 253, 253, 0.7);display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #808080;box-shadow: 8px 0px 40px rgba(0, 0, 0, 0.8);font-weight: bold;text-shadow: 0px 1px 1px #ffffff, 0px 1px 1px #000000ba;color: rgba(14, 14, 14, 0.915);}</style>
</head><body><button id="btn">Button</button>
</body>
<script>// 获取按钮和视频元素const btn = document.getElementById('btn');// 获取用户媒体navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {// 播放摄像头视频流const video = document.createElement('video');video.srcObject = stream;video.play();// 定义更新函数function update() {// 获取视频帧const track = stream.getVideoTracks()[0];const imageCapture = new ImageCapture(track);imageCapture.grabFrame().then(imageBitmap => {// 将图像绘制到 canvas 上const canvas = document.createElement('canvas');canvas.width = imageBitmap.width;canvas.height = imageBitmap.height;const ctx = canvas.getContext('2d');// 将图像水平翻转，实现镜像效果ctx.scale(-1, 1);ctx.translate(-canvas.width, 0);ctx.filter = 'blur(3px)';// 绘制图像中心位置const centerX =100;const centerY = 500;// 只绘制中间部分const cropWidth = 400;const cropHeight = 600;const cropLeft = centerX - cropWidth / 4;const cropTop = centerY - cropHeight / 4;ctx.drawImage(imageBitmap,cropLeft,cropTop,cropWidth,cropHeight,50,-6,canvas.width,canvas.height);// 将 canvas 转换为 data URL，并将其设置为按钮的背景const dataURL = canvas.toDataURL('image/jpeg');btn.style.backgroundImage = `url(${dataURL})`;// 在下一帧更新requestAnimationFrame(update);}).catch(error => {console.error('获取帧失败', error);});}// 在第一帧更新requestAnimationFrame(update);}).catch(error => {console.error('获取摄像头失败', error);});
</script></html>

金属质感不锈钢按钮Button相关推荐

【PS】绘制金属质感圆按钮
1.新建圆形: 2.覆盖渐变效果,选择"角度"渐变方式: 3.执行[添加噪点]和[径向模糊]
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
CSS3白色质感3D按钮特效源码
这是一款css3白色质感3D按钮特效.该按钮使用svg做为图标,通过css3代码,打造出非常炫酷的3d按钮效果. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mf75 ...
.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
按钮button的常用属性和事件
文章目录 1 按钮button的常用属性和事件 1 按钮button的常用属性 1 按钮button的常用属性和事件 1 按钮button的常用属性 Tag: 我们可以通过tag对按钮增加数据. pr ...
MFC 基础知识：对话框背景添加图片和按钮Button添加图片
很长时间没有接触MFC相关的知识了,我大概是在大二时候学习的MFC相关知识及图像处理,现在由于要帮个朋友完成个基于C++的程序,所以又回顾了下相关知识.的确,任何知识一段时间过后都比较容易忘记,但回顾 ...
ps图片拖不进去_PS教学：你的logo还不够高大上？7步教做出黄色金属质感logo
今天美迪君向大家分享一下,如何用ps简单制作带有黄色金属质感的logo方法,难度不仅不大,且制造出来的logo也是非常漂亮,值得大家学习.接下来就为大家演示一下制造的方法. 1.打开PS,Ctrl+N ...
winfrom 点击按钮button弹框显示颜色集
1.窗体托一个按钮button: 2.单击事件: 1 private void btnForeColor_Click(object sender, EventArgs e) 2 { 3 using ( ...
单选按钮_PerlTk教程之按钮Button、复选按钮Checkbutton、单选按钮Radiobutton（附完整代码）...
<Perl-Tk教程之按钮Button.复选按钮Checkbutton.单选按钮Radiobutton>Perl-Tk中有三种不同形式的按钮组件可供选择,它们分别是按钮(Button), ...

金属质感不锈钢按钮Button

金属质感不锈钢按钮Button相关推荐

最新文章

热门文章